前端开发必备调试技巧

Posted jlfw

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端开发必备调试技巧相关的知识,希望对你有一定的参考价值。

Chrome调试工具的使用

常用的面板

  • Elements(元素面板)

  • Console(控制台面板)

  • Sources(资源面板)

  • NetWork(网络面板)

1. Elements panel

定义:通过Elements 面板,不仅仅可以查看和编辑页面和样式,而且所做的改变立即生效。

操作DOM

  1. 查看DOM树:打开Element面板,可以查看所有DOM节点,包括CSS和javascript,一般左侧查看DOM树,右侧查看CSS样式。

  2. 选区DOM节点:将鼠标移到网页中的某元素上面,可以选中DOM节点

  3. 增加、删除和修改DOM节点:在Element面板中,选择DOM节点,在文本处右击鼠标,会弹出一个菜单,

  4. 为节点添加属性,查看盒模型

  5. 查看CSS样式,如更改CSS属性,动态变化

  6. 技巧:在CSS样式的属性值上,如果是数字的属性值,则可以通过按上下方向快捷键来给属性值加一,通过按住shift键的同时按上下方向快捷键,可以给属性值递增十
    技术图片

Element 译为“元素”,Element 面板可以让我们动态查看和编辑DOM节点和CSS样式表,并且立即生效,避免了频繁切换浏览器和编辑器的麻烦。 我们可以使用Element面板来查看源代码,它不但可以很好的格式化DOM节点,清晰的展现html文档,比在当前网页中右击鼠标选择“查看网页源代码”强大很多。 总之,Element面板可以让我们很透彻的了解DOM和CSS的底层结构。

碰到的问题

在查看某些伪类的属性,如:hover时,无法查看到具体的样式,查阅了一些资料,是通过鼠标Hover在元素上,然后右键检查,或者在面板选择上:hover。

2. Console panel

定义:使用Console API向控制台输出信息,产生JavaScript文件和启动调试会话

用途:

  1. console.log(messgae),用于调试JS,查看错误等。

  2. 直接运行JS代码

技术图片
技术图片

碰到的问题

console.log(),console.info(),console.error(),console.warn()需要区别一下,最好使用过滤工具,过滤一些无用信息

3. Network panel

查看HTTP请求,查看cookie,AJAX请求等信息,
例如,给按钮绑定点击事件,可以通过网络面板,来查看请求是否成功发出,和接收到的信息。

4. Sources panel

用途:可以用来设置断点调试JS

调试步骤

打断点、单步执行、监听变化

可以查看作用域、变量、回调等的变化,此外还可以监听事件的变化。

设置断点

选择想要设置断点的js具体行,点击行号,就设置了断点,再次点击,就取消已设置的断点。

1、调用栈(Call Stack):当遇到断点时,Call Stack 会显示当前断点所处的方法调用栈,调用栈中的每一层叫做一个 frame,点击任意 frame 可以跳到该 frame 的调用点上。在 frame 上反键可以选择 Restart Frame 可以重新执行该函数,配合变量修改和编辑代码等功能,可以在当前 frame 中反复进行调试。

2、作用域变量(Scope Variables):在这里可以查看此时局部变量和全局变量的值。

3、断点列表(Breakpoints):这里会列出你设置的所有断点,点击即可跳转到对应断点位置。
技术图片

碰到的问题

单步执行,和进入到函数执行,是有差别的

以上是关于前端开发必备调试技巧的主要内容,如果未能解决你的问题,请参考以下文章

前端开发中的JS调试技巧

一探前端开发中的JS调试技巧

一探前端开发中的JS调试技巧

一探前端开发中的JS调试技巧

转载一探前端开发中的JS调试技巧

前端开发环境前端使用GIT管理代码仓库需要掌握的几个必备技巧和知识点总结