Chrome代码调试指南

打开开发者工具

1. 在Chrome菜单选择：更多工具->开发者工具
2. 在页面原色上右键单击，选择检查
3. 快捷键
   • 打开最近关闭状态 cmd+opt+i或ctrl+shift+i
   • 快速查看DOM或样式 Command+Option+c或Control+shift+c
   • 快速进入Console查看log运行JavaScript Command+Option+j或Control+shift+j
   • F12打开

使用Elements调试DOM

查看与选择DOM节点

1. 将鼠标移动到需要被查看的元素
2. 右键选择检查

通过开发者工具左上角的小箭头可以选择需要查看的元素

通过如上图所示按钮，也可以定义调试工具所处位置。

实时编辑HTML和DOM节点

在调试工具处，双击 dom 节点即可进入编辑。

也可以通过右键节点选择编辑 HTML 模式。

在 Console 中访问节点

1. 通过 document.querySelectAll 访问

1. 通过 $0 快速访问选中元素

1. 拷贝 ->js path

复制出的路径是通过 querySelector 接口选择的元素

给 DOM 中断点调试

1. 在属性修改时打断点
2. 节点删除时打断点
3. 子树修改时打断点

通过对需要调试元素右键选择 break on 即可选择调试方式。

调试样式及 CSS

查看与编辑 css

在调试工具右侧即可看到样式

通过 filter 也可以过滤（搜索）某个属性

点击空白处也可以新增属性；点击前边的勾也可以使此属性失效。

在元素中增加类与伪类

1. 通过点击 hov 按钮，可以选择伪类。例如点击:hover 表示模拟鼠标悬停。

1. 点击 cls 按钮，可以为元素添加一个类

1. 点击加号，表示可以新建一个类

快速调试 CSS 数值及颜色图形动画

当鼠标悬停到... 图标时可以看到如下

点击即可展开可视化界面。

通过选择 more tools -> Animations 即可调出动画窗口。

当触发动画时就会自动录制，并且可以通过下方的属性可视化调试。

使用 Console 调试 Javascript

Console 交互式命令

在 Console 处可以写任意 JavaScript 代码。

在 Console 中调试 log 消息

1. 普通信息

console.log('普通信息')

1. warn 告警信息

console.warn('告警信息')

1. 错误信息

console.error('错误信息')

1. 展示 json 格式的复杂信息

var t = [
    {name:'666',age:'17',sex:'男'},
    {name:'666',age:'17',sex:'男'},
    {name:'666',age:'17',sex:'男'}
]
console.table(t)

1. 信息组展示

var label = '一组信息'
console.group(label)
console.info('Log')
console.info('warn')
console.info('error')
console.groupEnd(label)

1. 定制样式

var styles = 'color:red;background:black;font-size:20px;'
console.log("%c样式展示",styles)

1. 网络请求错误展示 当请求资源不存在或其他信息时打印的日志。

1. 断言

console.assert(false,'断言失败')

1. 查看代码执行时间

console.time()
var l = 1
console.timeEnd()

1. 清除打印日志

console.clear()

调试 JavaScript 的基本流程

1. 在代码中写入 debugger
2. 断点调试

可以通过图中表示的几个按钮进行调试。按钮从左向右依次表示

• 恢复代码执行
• 跳过下一个函数执行
• 进入下一个函数执行
• 跳出函数
• 单步执行

也可以通过下方事件进行监听。

Sources 面板

1. 调出面板

左侧为全局的静态资源，选择一个文件也可以对源文件进行编辑。

1. 按住 ctrl+p 可以全局搜索某个资源

1. 按住 ctrl+shift+p 可以输入一些命令

使用 Snippets 来复制 Debugging

简单来说就是为当前页面新加一个代码片段。

1. 打开 Snippets 面板

1. 编写需要添加的代码片段

1. 执行代码片段

1. 即可看到 console 里边输出了 test

使用 DevTools 作为 Text IDE

1. 通过 Sources->Filesystem 唤起面板

1. 添加文件夹 添加文件夹需要允许浏览器获取权限

1. 注意 在此修改的内容等同于直接修改文件。

调试网络

Network 面板

使用 Network 详细分析请求

1. filter 过滤只能过滤出下方已经展示的请求包含的地址。而无法过滤内容。
2. 搜索 可以搜索到返回数据内容
3. Preserver log 可以在跳转时保留网络请求日志
4. Disable cache 不使用缓存

使用 Network Waterfall 分析页面载入性能

客户端存储 Application 面板

查看与调试 Cookie

通过上方的 filter 可以进行过滤，同样的也可以删除或新增 Cookie。

查看 LocalStorage 与 SessionStorage

与 Cookie 类似。

移动端 H5 页面调试

模拟移动端设备

使用 Chrome DevTools 进行 H5 页面开发

1. 通过使用 show sensors 命令呼出 Sensors 面板进行调试

在 Edge 中为传感器。

1. 网络菜单

在 chrome 为 network

在 Chrome DevTools 中集成 React 和 Vue 插件

集成 React 插件

由于国内无法使用 Google 商店，因此建议使用 Edge 商店。

安装此插件后，如果网页是由 react 开发的，那么开发者工具会多出一个 react 的选项，并且插件图标是点亮的。

集成 VUE 插件

与 React 插件类似。