两个月开发前端调试总结（Chrome）

通过两个月的前端开发，总结一下前端的调试技巧。

前端调试和后端调试是不一样的，前端主要通过浏览器调试，我这里用的谷歌。所以我下次说的只适用于谷歌。

开启调试第一步 F12

调试工具介绍

Elements

主要通过右击检查dom元素。
可以在右侧直接修改 dom元素样式，就可看到效果。Computed主要是看盒模型。

Console

控制台下主要的内容
我主要是看报错信息和控制台打印信息

Sources

Sources可以看到加载的前端文件
这里我主要用到的是断点调试。我一般用到 F8 和 F10较多

• 1 找到自己需要调试的文件 快捷键 Ctrl + p 搜索文件

• 2 找到代码行 打断点

• 右边按钮如下：

  Pause/Resume script execution：暂停/恢复脚本执行（程序执行到下一断点停止）。 F8
  Step over next function call：执行到下一步的函数调用（跳到下一行）。 F10
  Step into next function call：进入当前函数。 F11
  Step out of current function：跳出当前执行函数。 Shift + F11
  Deactive/Active all breakpoints：关闭/开启所有断点（不会取消）。 Ctrl +./Ctrl+, :
  Pause on exceptions：异常情况自动断点设置。
  

Network

这里是很重要的，可以看到请求的一切信息，包括请求状态，请求参数，返回数据

Application

这里我主要是看缓存信息，包括cookie信息，在必要的时候 清除缓存等。