Chrome DevTools 开发者工具 技巧 调试

https://developers.google.com/chrome-developer-tools/docs/tips-and-tricks

1、console面板多行输入
Shift + Enter 可以换行，而不是执行代码

2、Ctrl + Shift + C 可以直接进入审查元素的模式

3、Ctrl + L 清除console历史

4、选择页面上面的一个元素，然后在console里面输入$0，这个元素就可以被脚本使用了，如果页面用了jquery那就使用$($0)

5、使用XPath

$x(xpath)

来选择节点

$x('//img')

:

However, the function also accepts an optional second argument for the path context - i.e

$x(xpath, context)

. This lets us select a specific context (e.g an iframe) and run an XPath query against it.

var frame = document.getElementsByTagName('iframe')[0].contentWindow.document.body;
$x('//'img, frame);

which queries the images within the specified iframe.

6、console.dir(object) 可以查看某个对象所有的属性

7、console.time() 和 console.timeEnd() 用来计算时间



8、在timeline里面，如果看到有黄色带感叹号的三角形，意味着你的代码触发了 强制/同步 的布局事件，这些事件对页面性能有明显影响（回流）

更多关于 console
console.warn("1") console.error("1") console.info("1") 只是输入icon不同

console.assert(false, "My assertion always fails");
类似于单元测试中的断言，当前面的表达式为 false 的时候，输出后面的信息

console.count 用来统计被执行了多少次

Profiles 面板选中Collect JavaScript CPU Profile，点击开始然后刷新页面点击停止
1、Bottom Up视图按照函数对性能影响排序
2、Top Down视图反应调用栈性能
切换成chart视图之后，横坐标表示的是时间，竖坐标表示的是调用栈（call stack），对性能消耗大的图片越宽，因此重点关注很宽的图片，不管他们在调用栈里的高低