前端开发必备调试技巧

Heier 发布于2019-08-20 17:58 / 2420人阅读

摘要：定义使用向控制台输出信息，产生文件和启动调试会话用途，用于调试，查看错误等。在上反键可以选择可以重新执行该函数，配合变量修改和编辑代码等功能，可以在当前中反复进行调试。

Chrome调试工具的使用 常用的面板

Elements(元素面板)

Console(控制台面板)

Sources(资源面板)

NetWork(网络面板)

1. Elements panel

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

操作DOM

查看DOM树：打开Element面板，可以查看所有DOM节点，包括CSS和JavaScript，一般左侧查看DOM树，右侧查看CSS样式。

选区DOM节点：将鼠标移到网页中的某元素上面，可以选中DOM节点

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

为节点添加属性，查看盒模型

查看CSS样式，如更改CSS属性，动态变化

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

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

碰到的问题

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

2. Console panel

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

用途：

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

直接运行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）：这里会列出你设置的所有断点，点击即可跳转到对应断点位置。

碰到的问题

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

GPU云服务器云服务器前端开发必备 web前端开发必备软件前端开发技巧调试技巧

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83973.html

前端开发必备调试技巧

摘要：定义使用向控制台输出信息，产生文件和启动调试会话用途，用于调试，查看错误等。在上反键可以选择可以重新执行该函数，配合变量修改和编辑代码等功能，可以在当前中反复进行调试。 Chrome调试工具的使用常用的面板 Elements(元素面板) Console(控制台面板) Sources(资源面板) NetWork(网络面板) 1. Elements panel 定义：通过Elemen...

binaryTree 2019-08-29 12:56 评论0 收藏0
前端开发必备调试技巧

摘要：定义使用向控制台输出信息，产生文件和启动调试会话用途，用于调试，查看错误等。在上反键可以选择可以重新执行该函数，配合变量修改和编辑代码等功能，可以在当前中反复进行调试。 Chrome调试工具的使用常用的面板 Elements(元素面板) Console(控制台面板) Sources(资源面板) NetWork(网络面板) 1. Elements panel 定义：通过Elemen...

zhou_you 2019-08-01 17:08 评论0 收藏0
你不知道的Chrome DevTools（2）：那些debug的技巧

摘要：我打算把一些上使用的高级技巧写成你不知道的这一系列的博文，希望大家一起学习学习。然而，这还不是最严重的，因为的语法比较宽松和随意，所以同一功能多种写法，各种奇葩都有。总结前端在调试代码的时候，知道开发工具上的小技巧，可以提高查找问题的效率。 Web前端开发过程中必然会用到Chrome浏览器自带的开发者工具Chrome DevTools，使用它作为Web前端开发性能调试的必备工具。就连隔...

warnerwu 2019-08-19 14:38 评论0 收藏0
2017-07-14 前端日报

摘要：前端日报精选技术周刊译文四种使用提升应用的方式当我们谈论前端架构时，我们到底在谈论什么是的，来了与之争发布中文译是的，来了掘金第期实践总结个必备的装逼技巧掘金年学习最好的书籍圆形随机分布种事件驱动的架构试用知识总结个人文章 2017-07-14 前端日报精选 SegmentFault 技术周刊【译文】四种使用webpack提升Vue应用的方式当我们谈论前端架构时，我们到底在谈论什么？...

lewinlee 2019-08-20 17:58 评论0 收藏0
前端资源系列（4）-前端学习资源分享&前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0