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

  1. Console 控制台

    1. 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：错误信息

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

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

    3. 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页面元素的说明

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

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

    1. 元素捕获

      1. 通过捕获页面元素，查看对应的元素，可能你要看他的标签或者他的样式

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

    2. Dom元素查找

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

    3. DOM编辑

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

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

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

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

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

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

      4. 模拟列表数据：

        • 测试边缘值情况时常用，模拟元素过多时候的溢出或者换行处理，这个时候不需要你用数据去驱动页面，相反是使用页面去模拟数据

        • 使用这种方式，省去了构造数据的时间，不需要去逻辑代码中操作

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

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

    4. 样式

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

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

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

  3. Network 网络请求

  4. Source 项目资源与调试

  5. Application 应用信息

  6. 其他常用元素

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

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