提高开发效率的前端调试方法最近入职，发现自己熟悉项目稍微缓慢、并且遇到问题就只能console.log，所以整理一篇入门

最近入职，发现自己熟悉项目稍微缓慢、并且遇到问题就只能console.log，所以整理一篇入门级的调试文章。此篇文章整理了谷歌控制台中元素面板、console面板、source面板的相关调试开发，能够提升准前端开发人员的开发效率。

chrome调试系列

element面板

这个面板会经常被用到，按照上图中编号进行简单说说

点击它然后放到页面元素就可以看到所选元素对应的信息
点击进入移动端适配模式，可以更换各种机型，并且当前多端开发比较火，可以开发h5适配其他的端
这里就是1选择的元素，可以查看元素的宽度高度、一些基本信息
所选元素所有的涉及的样式，我们可以在这里面进行一些调试看效果、然后复制到代码中，当然设计到一些浏览器适配。Styles旁Computed模块是所有计算后的样式（有些样式会重复，覆盖，在这里就显示覆盖后的样式）以及盒模型！

单击display: flex或旁边的新图标display: inline-flex以打开Flexbox编辑器。弹性盒编辑器提供了一种快速编辑弹性盒属性的方法。如下图所示
layout 模块就是布局模块，显示页面中所有grid、Flexbox元素，可以切换每个元素的叠加层。如下图
所选择元素的事件，因为工程化的发展，打包后的代码经过处理，不能很直观的定位了。
以hover为例。对所选择元素模拟hover事件，如下图，点击hover之后，相当于鼠标放入了这个元素，对应的样式也会出现。可以利用这个来修改hover样式。当然还有其他伪类的操作。
console面板

console面板的这个界面，可是非常的熟悉了，平常开发用得非常多，调试一些JS代码的时候，经常需要在console输出变量、查找变量。可以看到上面红色框框里面可以对应过滤或者打印某种信息。console 对象并不是javascript的内置对象，而是浏览器的内置对象，因此在控制台中的输出样式和各浏览器相关。

console.log

最最最熟悉的功能了，大部分情况都是输出变量，这个方式比alert更加的好用，因为alert默认toString()了嘛，可以展开打印的信息进行展开。具体看下面的例子注意点：请注意对象/数组在第一次扩展时进行评估。下面这个bar对象中name中在第二次进行了修改，展开第一次打印bar发现是修改后的。
```
    let foo = 'test'
    let bar = {
      name: 'test',
      age: 12
    }
    console.log(1)
    console.log(foo)
    console.log(bar)
    bar.name = 'test2'
    console.log(bar)
    console.log('%ccolorConsole', 'font-size:24px;color:red')
    console.log(document.querySelector('.test'))
```
console.info

console.info 和 console.log 的作用是几乎完全一样的，也是在控制台中打印信息，只不过打印时的样式可能与 console.log略有区别。
console.error

console.error 同样和console.log的作用几乎一样，不过会将打印的内容通过显目的红色标注出来并前面带一个 × 。如下所示，当大家在开发调试的过程中通过 console.log 打印的内容很多，但某条打印信息想要快速的找到时，console.error可以让你很便捷地找到。
console.warn

通过黄色感叹号来高亮打印信息。
console.time和console.timeEnd

console.time 和 console.timeEnd 两个方法是结合在一起使用的，他们接受一个相同的参数，输出两句表达式中间的代码的执行时间。
```
    console.time('计时器')
    for (var i = 0; i < 1000; i++) {
      console.log(i)
    }
    console.timeEnd('计时器')
```

console.table

console.table 会将复合数据类型（对象，数组等）在控制台中以表格的形式打印输出，并且你可以将对象数组嵌套乃至结合使用，他都能够将其解析为表格形式。

   let object1 = {
      a: 1,
      b: 2,
      c: 3,
      d: 4
    }
    console.table(object1)

    let arr1 = new Array(10).fill('test')
    console.table(arr1)

    let data1 = [{ num: 1 }, { num: 2 }, { num: 3 }]
    console.table(data1)

当然还有其他的一些其他的console方法，可以移步这篇

sources面板

个人觉得这部分是超级重要的，可以用这个辅助来进行分析项目、分析出现的问题。
1. debugger调试
  
  在代码中输入debugger，打开控制台，会跳到这部分开始断点调试
2. 断点调试
  
  找到sources里面对应的文件进行断点调试，当然现在webpack打包需要开启sourcemap，简单来讲，sourcemap是为了解决开发代码与实际运行代码不一致时帮助我们debug到原始开发代码的技术。尤其是如今前端开发中大部分的代码都经过编译，打包等工程化转换。
3. 调试中查看值
  1. 右侧scope中查看当前执行函数中变量的值
  2. 鼠标移入当前运行部分查看对应的值，当执行到某个语句时候，右侧有变量值显示
4. 技巧
  1. 可以大体定位到某个代码，然后分别对其周期函数打上断点，断点在执行时候，整个渲染和处理都是停滞的。我们可以看效果
  2. 回到主题，刚拿到一个项目，跑起来之后，因为组件化的种种原因，无法一下子找到对应的代码，可以根据页面中一些标志来定位，比如页面中有'切换'这个模块，可在项目中搜索这个词，或者搜索这个元素class，来定位。
  3. 不仅可以查看代码中一些逻辑，更是可以查看一些框架怎么做的，比如那vue中computed属性来说的话，你在这部分打了断点，发现后面这部分会执行好几次，它计算的值可能后续被修改？然后重新被触发呢。
  4. 一些全局方法，或者重写了全局方法，我们可以试试如下