title: 调试代码 speaker: lizhiyuan url: theme:colors transition: rollIn files:/css/style.css,/js/demo.js,/js/highlight/styles/github.css [slide]
[slide] {:.flexbox.vleft} ##调试代码的技巧 ###chrome浏览器的调试技巧
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>调试器</title>
<script src="jquery.min.js"></script>
</head>
<body>
<div>这是DIV</div>
<script>
// 观察值的方法：
var id = 'draging'
//..............
id += '123'
//假设这里经过了复杂的计算
//..............
//方法1：
// alert('id: ' + id)
//观察之后需要删掉alert
//或者注释掉
//因为每次执行时都弹出会影响后续开发
//而以后需要再次观察时还要加上alert
//会很麻烦
//方法2：
console.log('id: %s', id)
console.dir(id)
//输出到控制台中，不影响页面用户体验
//正式发布产品之前不需要删除
//开发时比较常用
//方法3：
//使用调试器
//使用Ctrl + Shift + S打开调试器
//必要时可以刷新页面重新加载代码
//在调试器窗口按F5可以直接刷新页面
$('div').text('这是通过jQuery更新文字')
// 在调试器的资源窗口可以看到所有的脚本列表
// 点击脚本名称后可以在内容窗口打开该脚本文件
// 在行号前点击可以创建或删除断点
//
// 所有的断点都会显示在资源窗口中开成断点列表
// 点击前面的筛选框可以暂时禁用或启用断点
//
// 断点：
// 断点是一个特殊的代码标记，程序执行到断点时会暂停执行
// 通过断点可以观察到正在执行的程序的内部状态
// 程序执行中断后可以将鼠标指针移到变量上观察变量的值
// 也可以把变量或表达式添加到监视列表中
// 观察是一次性的，是临时的
// 监视是长期的，可以实时反映出值的变化
//
// 在变量窗口中可以逐层展开一个对象，深入观察对象内部
// 可以查看对象的属性、方法、类型、以及对象的父类
// 控制程序的执行：
// F10: 逐行执行
// F8: 一直执行直到结束或遇到下一个断点
function add(a, b) {
return a + b
}
var c = add(3, 5)
// F11: 进入函数内部
// Shift F11: 从函数内部跳出
// 左下角有3个按扭：
// 第1个： 开启或关闭黑盒，压缩后的代码通常在黑盒中，调试时不会进入
// 但可以打开
// 第2个： 美化代码：将压缩的代码重新格式化
// 第3个： 启用或禁用断点
// 调用栈：
// 函数相互调用形成的调用关系。如：A -> B -> C -> D
// 调用栈是从下往上调用的，最下面是代码入口
// 点击调用栈上的项可以看到进入下一个函数的位置
// 代码搜索：
// 即可以搜索当前文件也可以搜索所有文件
// 还可以搜索函数定义，跳转到指定的行
// 还可以过滤变量（在左侧变量窗口中显示）
// 事件窗口：
// 可以查看所有的事件监听者
var div = document.querySelector('div')
div.onclick = function(e) {
alert('你点击了DIV')
}
// 勾选后事件发生时会直接暂停
// 就好像添加了一个断点一样
// 调试器选项：
// 注意显示变量筛选框时不需要加 *
</script>
</body>
</html>[slide] {:.flexbox.vleft} ##调试代码的技巧 ###console.log
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="">
<title>控制台</title>
</head>
<body>
<div>这是一个div标签</div>
<script>
console.log('控制台输出日志')
//日志
console.error('控制台输出错误')
//错误
console.warn('控制台输出警告')
//警告
console.debug('控制台输出调试')
//调试
console.info('控制台输出信息')
//信息
var age = 3
var name = 'ChangWei'
console.log('age:%d, name:%s, 小数: %.3f', age, name, age)
// 支持格式字符串
// %d 表示整数
// %s 表示字符串
// %.nf 表示小数，n保留小数的位数
// console.assert() //断言
var a = 4
var b = 5
//如果正确，则不输出，如果错误的话会输出错误信息
console.assert(a + b == 9, '如果不对我给你100日元')
console.assert(Math.PI == 3.1415926, '如果不是3.1415926，那你比我精确')
// alert(Math.PI)
// 断言通常用于自动化测试，如下测试：
function add(a, b) {
return a + b
}
//测试用例（测试用的例子）：
console.assert(add(3, 5) == 8, '未能通过整数测试')
console.assert(add('Chang', 'Wei') == 'ChangWei', '未能通过字符串测试')
console.assert(add(true, false) == false, '未能通过布尔测试')
console.assert(add(new Date(), 1) == new Date(2016, 4, 13), '未能通过日期测试')
//可以瞬间执行完所有测试用例
// 不使用断言时需要人工参与测试，非常耗时无趣
// 对于Math这样的类在开发时要做N多次测试
// 如果不使用自动化测试的方法是很难想像的
// var a = 3, b = 5
// alert(add(3, 5))
// 人工检查
var obj = new Object()
//创建一个对象
//为对象添加属性，或者可以理解为给属性赋值
obj.name = 'ChangWei'
obj.age = 3
obj.isMale = true
// 展示一个对象的详细信息
// 列出对象的属性、方法、类型等信息
console.dir(obj)
// 以下通过对象【字面量】的方法创建对象
var newObj = { name: "ChangWei2", age: 33, isMale: false }
console.dir(newObj)
// 字面量：值的直接表示法
// var a = 3 3就是字面量
// var b = true true就是字面量
//
// 对象是比较复杂的，所以字面量格式也比较复杂
var me = {
name: 'ChangWei',
age: 3,
isMale: true,
course: {
name: 'HTML5',
months: 4.5
}
}
var pName = me.name
var cName = me.course.name
var cMonths = me.course.months
console.log('pName: %s, cName: %s, cMonths: %.1f', pName, cName, cMonths)
console.dir(me)
// 即使很复杂的对象也能搞定
console.dir(document)
var div = document.querySelector('div')
console.dirxml(div)
// 可以在控制台上选择指定标签，也可以通过点击图标直接定位到标签的HTML代码
// 性能测试
console.time('add')
add(3,5)
console.timeEnd('add')
console.time('querySelector')
var div = document.querySelector('div')
console.timeEnd('querySelector')
console.time('for')
var x = 1
for(var i = 0; i < 100000000; i++){
x += 1
}
console.timeEnd('for')
console.log('x的值：%d', x)
//分组
console.group('单元测试add方法')
console.assert(add(3, 5) == 8, '未能通过整数测试')
console.assert(add('Chang', 'Wei') == 'ChangWei', '未能通过字符串测试')
console.assert(add(true, false) == false, '未能通过布尔测试')
console.assert(add(new Date(), 1) == new Date(2016, 4, 13), '未能通过日期测试')
console.groupEnd()
console.log('分组已经结束')
//只有firefox支持
console.table(newObj)
console.table(me)
</script>
</body>
</html>