目录
- 开发者工具
- console对象
- console.log方法
- 其他输出方法：debug，info，warn，error方法
- console.table方法
- console.assert方法
- time和timeEnd方法
- 分组方法：group和groupend
- 其他方法
- 命令行API
- debugger语句
- 移动端开发
- 模拟手机视口（viewport）
- 模拟touch事件
- 模拟经纬度
- 远程除错
- Google Closure
- Javascript 性能测试
- 第一种做法
- 第二种做法
- 参考链接
开发者工具
目前，各大浏览器都自带开发工具。以Chrome浏览器为例，打开它的“开发者工具”（Developer Tools）的方法有三种。
-
按F12或者Control+Shift+i。
-
在菜单中选择“工具”/“开发者工具”。
-
在一个页面元素上，打开右键菜单，选择其中的“Inspect Element”。
打开以后，可以看到在顶端有八个面板卡可供选择，分别是：
-
Elements：用来调试网页的HTML源码和CSS代码。
-
Resources：查看网页加载的各种资源文件（比如代码文件、字体文件、css文件等），以及在硬盘上创建的各种内容（比如本地缓存、Cookie、Local Storage等）。
-
Network：查看网页的HTTP通信情况。
-
Sources：调试JavaScript代码。
-
Timeline：查看各种网页行为随时间变化的情况。
-
Profiles：查看网页的性能情况，比如CPU和内存消耗。
-
Audits：提供网页优化的建议。
-
Console：用来运行JavaScript命令。
这八个面板都有各自的用途，以下详细介绍Console面板，也就是控制台。
console对象
console对象代表浏览器的JavaScript控制台。虽然它还不是标准，但是各大浏览器都原生支持，已经成为事实上的标准。
console对象主要有两个作用：
-
显示网页代码运行时的错误信息。
-
提供了一个命令行接口，用来与网页代码互动。
console对象的接口有很多方法，可供开发者调用。
console.log方法
log方法用于在console窗口显示信息。
如果参数是普通字符串，log方法将字符串内容显示在console窗口。
console.log("Hello World")
// Hello Worldconsole.log("a","b","c")
// a b c如果参数是格式字符串（使用了格式占位符），log方法将占位符替换以后的内容，显示在console窗口。
console.log(" %s + %s = %s", 1, 1, 2)
// 1 + 1 = 2上面代码的%s表示字符串的占位符，其他占位符还有
- %d, %i 整数
- %f 浮点数
- %o 对象的链接
- %c CSS格式字符串
log方法的两种参数格式，可以结合在一起使用。
console.log(" %s + %s ", 1, 1, "= 2")
// 1 + 1 = 2其他输出方法：debug，info，warn，error方法
除了log，console对象还有四个输出信息的方法：
-
debug：等同于log。
-
info：等同于log。
-
warn：输出信息时，在最前面加一个黄色三角，表示警告。
-
error：输出信息时，在最前面加一个红色的叉，表示出错。
