史上最全！Chrome开发者工具的 辅助 开发技巧

Chrome开发技巧从以下几个常用模块进行阐述

Console：控制台Elements：页面元素Network：网络请求Sources：项目资源与调试Application：应用信息(存储信息)其他常用元素

1.Console 控制台

  

Console: JS API功能调试工具

例如测试ES6提供的对数组处理some/every语法，不需要专门在自己的某个项目工程里面去跑，可以借助控制台直接进行编码调试

测试代码如下【自行尝试】

var list = [1,2,3,4,5,6]
var status1 = list.some(i => i > 3)
var status2 = list.every(i => i > 3)
console.log(`list数据是否【含有】超过3的数据: ${status1}`)
console.log(`list数据是否【全部】超过3: ${status2}`)

3. 还需要注意的是不要使用let,const定义变量，在项目代码中我们提倡使用let/const，但在console控制台编写代码时提倡使用var，可以避免定义重复的问题，不信你可以试试同一段代码出现两次时

                        =========================分割线=======================

                        =========================分割线=======================

2.

Console:**日志信息级别与过滤** Verbose: (对应console.debug)Info: 常规日志 (对应console.log)Warnings：警告信息（对应console.warn）Errors：错误信息

                        =========================分割线=======================

                        =========================分割线=======================

Console:**输出关键词**

输出的类型有很多，console.log/info/warn/error/....,这里列举的是在编写测试代码时常用的

3.1 计算代码执行时间：console.time 、console.timeEnd

计算1到10的和，使用for与forEach进行最短时间对比

var list = [1,2,3,4,5,6,7,8,9,10]
function f1 () { var sum=0; list.forEach(i =>sum+=i); return sum }
function f2 () { var sum=0,len=list.length; for(var i = 0;i<len;i++){sum+=list[i]}; return sum }
 
console.time('Fun1')
console.log(f1())
console.timeEnd('Fun1')
 
console.time('Fun2')
console.log(f2())
console.timeEnd('Fun2')

                        =========================分割线=======================

                        Console模块常用描述结束，下面开始Elements页面元素的说明

                        =========================分割线=======================

Elements 页面元素（选中图片后，按Space键即可放大）

元素捕获 通过捕获页面元素，查看对应的元素，可能你要看他的标签或者他的样式示例：选中图片后，按Space键即可放大

Dom元素查找 当我们操作具体DOM时出现问题，可以通过断点，在执行逻辑前先看下DOM这里的元素有没有生成。例如vue中常用的this.$refs.xxx，使用时有时失败就是DOM还没生成类似弹窗这种标签，有时逻辑是通过document.create动态创建的，关闭弹窗的时候又没有删除DOM没有进行回收处理，那么多次打开弹窗后页面标签就会n块一致的标签只是页面无感知，借助元素查找可以查找关键的类名，如果发现关闭弹窗后页面Elements搜索弹窗类名时出现多个，那逻辑就需要优化。类似如此，举一反三同时按住‘Shift + F’，然后输入需要查找元素的关键词

DOM编辑 修改标签属性（捕获元素，注意：双击点击元素标签内容，进行修改）

                        =========================分割线=======================

        删除标签元素（捕获元素，鼠标右键点击，选择delete element）

                        =========================分割线=======================

添加标签元素（捕获元素，右键选择Edit as Html,然后编写元素，没有快捷补齐）

模拟列表数据： 测试边缘值情况时常用，模拟元素过多时候的溢出或者换行处理，这个时候不需要你用数据去驱动页面，相反是使用页面去模拟数据使用这种方式，省去了构造数据的时间，不需要去逻辑代码中操作

注意：在涉及js计算DOM高度的场景下可能不太适用，会影响js逻辑处理

                       =========================分割线=======================

样式 样式更改 通常编写页面时都是大概写一个框，然后在Elements中完善，最后再把调试好的样式代码复制过去代码中，尽量不要改一句样式代码运行一遍效果，效率很低示例：选中图片后，按Space键即可放大

                        =========================分割线=======================

                        =========================分割线=======================

伪类操作 如果元素通过css设置了hover样式，一般需要鼠标悬浮才能看到样式，但在Elements可以设置为hover样式，进而进行样式的具体调整示例：选中图片后，按Space键即可放大

                        =========================分割线=======================

                        =========================分割线=======================

新增样式 假设ul下有很多li，但是代码写的时候没有为li写样式，此时Elements右侧是没有相关样式代码可以调试的，这时可以添加一个样式快速操作，不需要先去代码中写示例：选中图片后，按Space键即可放大

                        =========================分割线=======================

                        Elements模块常用描述结束，下面开始Network网络模块的说明

                        =========================分割线=======================

Network 网络请求

网络面板常用按钮说明

示例：选中图片后，按Space键即可放大

                        =========================分割线=======================

                        =========================分割线=======================

请求信息各模块说明 进入请求详情面板

模块说明 Headers: 请求相关信息

Preview: 响应数据(已格式化，更易查看)

Response: 响应数据

Timing: 请求相关时间

Cookies:

                        =========================分割线=======================

                        Network模块常用描述结束，下面开始Source项目资源与调试模块的说明

                        =========================分割线=======================

Source 项目资源与调试

这一块主要讲Debugger,中文叫断点调试，也就是js逻辑出错时，通过它快速定位错误在哪里debugger与console.log的使用说明 如果逻辑不是很复杂，可以使用console.log；如果逻辑比较复杂，过程中出现错误那最好使用debugger，不然你可以需要在很多地方console，效率很低；另外如果没有100%信心逻辑可以，那就使用debugger最高效推荐使用debugger 打断点的方式

通过在js代码中添加语句 debugger,执行时便会进入断点

function sum (x,y) {
    debugger
    return x + y
}
sum(1,2)

在Sources显示的代码行左侧点一下，就会打下一个断点（再点一下就会取消）

Debugger调试（这个测试最好不要在控制台编写代码测试，因为每次会动态生成文件导致你上一次的打的debugger失效，最好基于已有项目）

跟着Console提示的报错位置打Debugger

debugger悬浮查看变量时留意，选中的是什么变量的，是x的，还是x.y的，还是x.y.z的，可以自己划词选中（按住鼠标左键向右划选中变量）要看的变量

                        =========================分割线=======================

                        =========================分割线=======================

断点的跳法

【只跳debugger点】

【跳下一步逻辑，不进入函数内部逻辑】

【跳下一步逻辑，进入函数内部逻辑 与 跳出函数内部逻辑】

【放行断点，等同去除断点】

【点了debugger放行的按钮要注意：下次debugger都将失效会直接运行，需要debugger时要注意取消掉，很多小伙伴放行掉了调试的时候一直骂骂咧咧没进debugger】

                        =========================分割线=======================

                        =========================分割线=======================

变量监听 上面的调试都是需要鼠标悬浮在变量上才能看到值下面讲一下直接选定变量进行监听的场景 在循环的逻辑中较为常用，特征就是每次要看的变量都是固定名称，不需要每次都点提供稳定查看变量的环境，不需要担心手抖又得重新悬浮在变量上 举例观察以下循环函数中的变量

var list = [1,2,3,4,5,6,7]
var all = 0
 
function sum (val) {
    debugger
    all += val  // 假设我们想观察的是这个all的值
}
 
list.forEach(i => {  // 这里模拟循环
    sum(i)
}

示例：选中图片后，按Space键即可放大

结合console查看变量 上面的将变量添加到监视器的方式可以稳定地查看变量，但是可以看的内容面板太小了而且如果不是在循环中监听数据，每次都要点一下监听数据有点麻烦所以提供以下方式，将查看数据的舞台交给Console控制台，主要够大，看的舒服，方便，对于监听变量是对象以及数组这样复杂的数据来说更友好

使用debugger调试时，一定要注意有没有【F12】(chrome浏览器)打开开发者工具，打开才能调试，不然就是顺风顺水，不会进断点

                =========================分割线=======================

                Source模块常用描述结束，下面开始Application应用信息模块的说明

                =========================分割线=======================

Application 应用信息

LocalStorage

SessionStorage

Cookies

                        =========================分割线=======================

                        Application模块常用描述结束，下面开始其他模块的说明

                        =========================分割线=======================

其他常用元素 开发者工具嵌入页面方式

                        ====================================

                        至此，Chrome开发者工具的【辅助】开发技巧 描述完毕

                        ===================================