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 节点即可进入编辑。

d5469863-68f6-4bab-97db-e677decb7226

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

在 Console 中访问节点

1. 通过 document.querySelectAll 访问

image-20200819102648246

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

acc2bde7-d65d-4a52-934e-0ffeae65ad63

1. 拷贝 ->js path

image-20200819102911893

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

给 DOM 中断点调试

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

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

image-20200819103225069

调试样式及 CSS

查看与编辑 css

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

image-20200819104003961

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

image-20200819104035524

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

a3627d23-7c37-449d-b49d-5ac72830c7e9

在元素中增加类与伪类

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

image-20200819104612846

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

image-20200819104707614

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

image-20200819104730926

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

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

image-20200819105332830

image-20200819105353894

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

image-20200819105602864

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

image-20200819105904622

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

使用 Console 调试 Javascript

Console 交互式命令

image-20200819110537426

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

在 Console 中调试 log 消息

1. 普通信息

image-20200819112243040

console.log('普通信息')

1. warn 告警信息

image-20200819112252191

console.warn('告警信息')

1. 错误信息

image-20200819112300854

console.error('错误信息')

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

image-20200819112314090

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

1. 信息组展示

image-20200819112326629

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

1. 定制样式

image-20200819112336966

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

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

image-20200819112435350

1. 断言

image-20200819112446959

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

1. 查看代码执行时间

image-20200819112455085

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

1. 清除打印日志

console.clear()

调试 JavaScript 的基本流程

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

image-20200819124436110

image-20200819124512724

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

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

image-20200819124950781

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

Sources 面板

1. 调出面板

image-20200819144101488

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

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

image-20200819144144830

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

image-20200819144249607

使用 Snippets 来复制 Debugging

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

1. 打开 Snippets 面板

image-20200819144839591

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

image-20200819144916847

1. 执行代码片段

image-20200819144935685

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

image-20200819144959422

使用 DevTools 作为 Text IDE

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

image-20200819145733957

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

image-20200819145848143

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

调试网络

Network 面板

image-20200819150253455

使用 Network 详细分析请求

image-20200819151457490

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

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

image-20200819152817560

image-20200819152831145

客户端存储 Application 面板

查看与调试 Cookie

image-20200819153112232

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

查看 LocalStorage 与 SessionStorage

image-20200819153556477

与 Cookie 类似。

移动端 H5 页面调试

模拟移动端设备

image-20200819153727727

使用 Chrome DevTools 进行 H5 页面开发

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

image-20200819154334119

在 Edge 中为传感器。

image-20200819154442591

image-20200819154524467

1. 网络菜单

image-20200819154604472

image-20200819154611722

在 chrome 为 network

image-20200819154707177

在 Chrome DevTools 中集成 React 和 Vue 插件

集成 React 插件

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

image-20200819154825420

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

image-20200819155208648

image-20200819155218066

集成 VUE 插件

与 React 插件类似。