前端调试技巧(PC调试)

标签: 前端 调试 技巧 | 发表时间:2023-03-04 12:04 | 作者:前端_bug
出处:https://juejin.cn/frontend

theme: healer-readable

前端工作中,不仅编码很重要,重现bug,解决bug的能力同样重要。而这些都离不开代码调试。本文就一些调试技巧做出总结,不足之处,欢迎大家多多补充。

1. console.log()

在你觉得有问题的代码处,加上一句 console.log() 就好了。然后在开发者工具控制台就可以看到你打印出来的东西了。

2. 断点调试

debugger 语句
在代码中添加 debugger 语句,当代码执行到该语句的时候就会自动断点。

debugger.png

我们需要关注上图红色方框内的七个按钮。从左到右依次标记为a,b,c,d,e,f,g。

  a: Pause/Resume script execution:暂停/恢复脚本执行(程序执行到下一断点停止)
b: Step over next function call:逐语句执行(跳到下一行),快捷键F10
c: Step into next function call:进入当前函数,快捷键F11
d: Step out of current function:跳出当前执行函数,快捷键F11+Shift
e: Step 和b的作用一致,快捷键F9
f: Deactive/Active all breakpoints:关闭/开启所有断点
g: Pause on exceptions:异常情况自动断点设置

此时,我们在 Scope 面板中可以看到该作用域下变量和函数的信息(鼠标悬浮在对应的变量上也可以看到)方便我们排查问题。

(1)手动断点

打开开发者工具的 source 面板,在左侧目录树中找到对应的JS文件,在右侧对应文件的行号上单击即可实现断点的添加和删除。在添加断点之后,代码就会在断点处停止执行。

(2)事件断点

在上图中点击 Event Listener Breakpoints ,然后选择我们需要监听的事件。之后当该事件被触发时,浏览器会帮我们自动在相应的js文件代码处打上断点。

举个例子:我想在百度首页输入框中输入时,进行断点调试,就可以使用该功能。 Kim 2023-01-19 145613.png

(3)请求断点

在上图中点击 XHR/fetch breakpoints ,然后添加对应的请求URL,之后当该请求发送的时候,就会自动断点。

还是用百度举例:添加一个请求URL断点,然后刷新页面。 截屏2023-01-19 下午3.12.00.png

截屏2023-01-19 下午3.16.55.png

(4)Dom 断点

我们还可以对指定的 dom 节点进行断点设置,根据设置类型的不同,浏览器会在 dom 节点属性变化,子树变化,节点被移除三个时机帮我们进行断点。

还是用百度举例:在指定 dom 节点上右击,选择 Break on ,选择对应的时机进行设置

截屏2023-01-19 下午3.34.18.png

截屏2023-01-19 下午3.37.24.png

3. 动画调试

工作中肯定会遇到调试动画的场景,为了调试动画,经常一遍又一遍的刷新页面,其实大可不必,有更简单的办法。

  1. 打开开发者面板,开启命令行(Mac: Command+Shift+P ,Windows: Control+Shift+P
  2. 输入 Animations ,选择 Show Animations,打开动画检查器

animation.83e3fc06.png

  1. 之后在页面发生的动画都会被其捕获,我们就可以在动画检查器中调试动画了

animationPanel.9109cbc5.png

  区域1:控制动画的速度和播放;  
区域2:捕获的页面动画;  
区域3:动画的时间线;  
区域4:动画的实现细节;  

我们可以很方便的在这里将动画调试到满意的程度,然后复制对应的动画属性参数到代码中。

相关 [前端 调试 技巧] 推荐:

前端调试技巧(PC调试)

- - 掘金 前端
前端工作中,不仅编码很重要,重现bug,解决bug的能力同样重要. 本文就一些调试技巧做出总结,不足之处,欢迎大家多多补充. 在你觉得有问题的代码处,加上一句 console.log() 就好了. 然后在开发者工具控制台就可以看到你打印出来的东西了. 在代码中添加 debugger 语句,当代码执行到该语句的时候就会自动断点.

Docker 调试技巧

- - 行业应用 - ITeye博客
摘要: 『重用』容器名 但我们在编写/调试Dockerfile的时候我们经常会重复之前的command,比如这种docker run --name jstorm-zookeeper zookeeper:3.4,然后就容器名就冲突了. 但我们在编写/调试Dockerfile的时候我们经常会重复之前的command,比如这种.

chrome developer tool 调试技巧

- - Taobao UED Team
这篇文章是根据目前 chrome 稳定版(19.0.1084.52 m)写的, 因为 google 也在不断完善chrome developer tool, 所以 chrome 版本不同可能稍有差别. 一些快捷键也是 windows 上的, mac 下的应该大同小异.. 常规的断点相关的 breakpoint/conditional-breakpoint/call-stack/watch-expressions 等就不涉及了..

Android调试程序技巧

- - ITeye博客
在开发的过程中我们经常需要调试程序的执行路径,如我们想知道一个Activity的生命周期方法的调用顺序,我们可能会写如下代码. 这样每次都要输入两个参数,有没有更简便的方法呢. 我们可以通过Thread.currentThread().getStackTrace()获取当前堆栈调用信息,从堆栈信息中可以获取当前调用的java文件名,类名,方法名和代码行号.

Android 4.4 让前端调试也能这么酷

- - 腾讯ISUX - 社交用户体验设计 - Better Experience Through Design
Google公司低调地推出了Android4.4,提供了一系列让人眼前为之一亮的改进体验,如无线打印、NFC(近场通信)等. 作为一名前端同学,同时也需要敏感地关注到Android4.4在使用浏览器内核时的一些变动. Android4.4之前浏览器的渲染引擎都是webcore,Android默认浏览器使用的接口是Webkit.

网易前端云课堂,JavaScript程序设计:JS调试

- - CSDN博客推荐文章
本节主要通过一个加法器,介绍JS如何调试. 计算器
. . 1,一般调试JS,打印信息有如下三种:. a,用alert,缺点是每次都弹框. b,用console.log,这个数据量小还可以.

前端工程師必看: 十大 CSS 技巧

- - 小惡魔 - 電腦技術 - 工作筆記 - AppleBOY
底下內容來自於原網站,在加上筆者的一些補充. 用 firebug 或 console 來除錯. 在 Firefox 還沒有推出 Developer Tools 時,大家一定是用 Firebug 來除錯,2006 年 Firebug 第一版 release 出來,讓 web 開發者可以更快速的瞭解網站除錯,也可以透過 Firebug 來瞭解網站的 performance.

使用gdb调试运行时的程序小技巧

- - 淘宝核心系统团队博客
转载请注明:转载自淘宝核心系统团队博客,谢谢. 原文链接地址: 使用gdb调试运行时的程序小技巧. 下面介绍我调试时经常遇到的三种问题,如果大家也有类似的问题交流一下解决方法:. 情景1:在不中止程序服务的情况下,怎么调试正在运行时的程序. 情景2:需要同时看几个变量的值或者批量查看多个core文件的堆栈信息怎么办.

Java程序员应该知道的10个调试技巧

- - 博客 - 伯乐在线
摘要:调试不仅可以查找到应用程序缺陷所在,还可以解决缺陷. 对于Java 程序员来说,他们不仅要学会如何在Eclipse里面开发像样的程序,更需要学会如何调试程序. 本文介绍了Java程序员必知的10个调试技巧,保证让你受益匪浅. 调试可以帮助识别和解决应用程序缺陷,在本文中,作者将使用大家常用的的开发工具Eclipse来调试Java应用程序.

今天开始应该使用 5 个JavaScript调试技巧

- - SegmentFault 最新的文章
我之前使用过用 printf debugging,自此之后我用这种方法似乎总能更快地解决bug. 在某些情况下需要更好的工具,下面是其中的一些佼佼者,我敢肯定你会发现它们的有用之处:. 正如我 之前提到的,你可以使用“debugger;”语句在代码中加入强制断点. 有时DOM像有了自己的想法.