关于浏览器调试工具

一、打开Dev Tool方式

打开方式：菜单>更多工具>开发者工具

快捷键:F12

二、打开命令菜单

快捷键

• Ctrl + Shift + P
• Command + Shift + P（MAC）

DevTool的黑色主题

 

 

截屏

•  Capture area screenshot->截取选中区域
•  Capture full size screenshot->截取当前页面的所有内容
•  Capture node screenshot->j截取选中节点的内容
•  Capture screenshot ->截取当前可视窗口的内容

dock命令

调试窗口的位置

dock to bottom -> 调试窗口在底部位置

dock to right -> 调试窗口在右侧

dock to left -> 调试窗口在左侧

 三、css调试

检查元素

选中元素->右键->检查

 

 

查询DOM树

• 快捷键：Ctrl + F / Command + F(MAC)
• 查询方式：文本查询、css选择器、Xpath

文本查询：

 css选择器：

 Xpath方式：

 Console -inspect(element)：

 编辑样式

 

复制样式

挑个你喜欢的网页，打开调试工具，选中你想复制样式的元素定位到dom节点，右键copy样式即可，以百度为例。

 

四、控制台（Console）

快捷键

• ctrl+shift+J
• command+option +J(MAC)

执行语句

 “$_”返回上一条语句的执行结果

 “$0”上一个选择的DOM节点（$1,$2...以此类推）

 

打印console.log

(error warn table clear group time assert trace)

 

 

 五、JavaScript的调试

 debugger

在代码中输入debugger断点调试，可以快速定位代码

 

 点击行号设置断点

 

 

命令行输入enable code folding可折叠代码

watch监听元素值变化

 

DOM Breakpoints

 

Event Listener Breakpoint监听事件断点

 

 

 

 

 Call Stack调用栈

 

六、Network

 

 

 

 

 

 

 

 

 七、Application