澳门太阳娱乐集团官网-太阳集团太阳娱乐登录

前端如何调试 | JavaScript如何调试 | 浏览器如何调
分类:脚本专栏

原链接:

<script>

.........//你的代码(上)

debugger;      //要下断点的地方

.........//你的代码(下)

</script>

大家在开发中,常常遇上偶现的bug,那些bug非常多都以网络差的动静下出现的,况兼都以客商出现的,大家在正规测量检验进度中总是不能够重现,那时候,我们得以主动让手提式有线电话机互连网变差来尝试再次出现这几个bug,张开手提式无线电话机安装分界面,找到开拓者选项如下:

编制程序菜鸟刚最初查找和修复 bug 依旧相比较不方便的,你只怕会随随意便使用 console.log(),试图让代码不易运转。看了本文再也不用那样干了!

上述难点的实施方案,使用   debugger;   就足以实现。

太阳集团太阳娱乐登录 1

下边就教你多少个调 bug 的没错姿势。你会学习怎么样行使 Chrome 开垦者工具设置断点,稳步调节和测验代码。这种专业方法能让您追寻和修复 bug 的频率大幅度进步。


假定找不到的话,用xcode 运转一下主次 就能够出去了。

虽说那篇教程突显的是怎么调节和测量试验二个实际的 bug,可是全部育赛工作思路对调度任何类型的 JavaScript bug 都以有辅导意义的。

除此而外在浏览器端下断点 能够调剂JS代码外,在页面内选择debugger;也能够直达调整的成效

点步向,然后选择status再点进去

步骤1:重现 bug

一部分朋友使用后未有效果与利益,这里重要说一下,

太阳集团太阳娱乐登录 2

调养 bug 的首先步就是复出 bug。所谓“重现bug”就意味着要找到一密密麻麻持续导致出现这么些 bug 的操作。你可能需求频仍复发 bug,所以尽大概地减小不须求的步骤。

不论是是浏览器端下断点调试,仍旧接纳debugger;调节和测量试验,

好了,看下图,选取我们想要的互连网意况,Enable,展开,你已经打响把您的无绳电话机网络境况变差了,安心的复发你的bug去吧。

依据如下指令来再次出现本学科需求修补的 bug。

都要先用浏览器 [提前张开] 你要调解的页面,之后张开浏览器的调治将养窗口

太阳集团太阳娱乐登录 3

那是我们本学科会选拔的网页,确定保证以新的价签:Demo: Get Started Debugging JavaScript with Chrome DevTools

(按钮盘上的F12),再也刷新页面,断点就能够知效,之后就能够进行调和了!

太阳集团太阳娱乐登录 4

在 demo 中,在“Number 1”文本框中输入 5

太阳集团太阳娱乐登录 5

太阳集团太阳娱乐登录,在“Number 2”文本框中输入数字 2

点击“Add Number 1 and Number 2”按钮

查看输入和开关下方的竹签,展现 5 + 1 = 51.

那不,bug 来了,这里结果确定错了,应该是 6。那就是你要修复的 bug。

手续2:使用断点暂停代码

Chrome 开垦者工具(以下简称 DevTools)能令你在代码运转期间暂停代码,并检讨此刻持有变量的值。暂停代码的工具叫做 Breakpoint。试试啊:

回到 demo,按 Command+Option或 Ctrl+shift+I(Windows,Linux)打开DevTools

点击“Source”标签

点击“Event Listener Breakpoints”张开该片段。DevTools 会展示一列可扩充的平地风波种类,比方 Animation和Clipboard

在“Mouse”事件系列旁边点击“Expand”

检查“click”复选框

&lt;img src="" data-caption="" data-size="normal" data-rawwidth="800" data-rawheight="536" width="800" data-original=";

太阳集团太阳娱乐登录 6

回到 demo,再一次点击“Add Number 1 and Number 2”.DevTools 会暂停 demo,在“Source”面板上高亮展现一行代码,高亮展现的是:

function onClick() {

为啥?

当您选拔“Click”时,会在装有的 click 事件上安装三个依据事件的断点。每当节点被点击,並且节点有 click 管理程序时,DevTools 就能够在该节点的 click 管理程序的率先行代码处自动制动踏板。

此处依旧要推荐下我的web前端学习群:867726593,不管您是小白依然大拿,小编小编都应接,不定时共享干货,包罗小编本人收拾的一份最新的web前端资料和0基础入门教程,接待初学和进级中的小伙伴。在不忙的光阴笔者会给大家答疑。

步骤3:稳步调节和测验代码

致使出现 bug 的三个广大原因便是本子运维顺序不科学。稳步调节和测量试验代码能令你过一次你的代码运转情况,每回一行,正确搜索哪个地方未有遵守预期的顺序执行。试试:

在 DevTools 的“Source”面板上,点击“Step into next function call”

&lt;img src="" data-caption="" data-size="normal" data-rawwidth="18" data-rawheight="26" width="18"&gt;

太阳集团太阳娱乐登录 7

以此按键能让您逐级查看 onClick() 函数的周转,每一趟一行。当 DevTools 高亮显示如下一行代码时就停下:

if (inputsAreEmpty {

今日点击“Step over next function call”按键

&lt;img src="" data-caption="" data-size="normal" data-rawwidth="36" data-rawheight="20" width="36"&gt;

太阳集团太阳娱乐登录 8

那会让 DevTools 实践 inputsAreEmpty() 而不进来它。注意 DevTools 跳过了几行代码,那是因为 inputsAreEmpty() 求值结果为 false,所以 if 语句的代码块未有运转。

那便是日益调节和测量检验代码的为主思想。假使您查看 get-started.js 中的代码,会发觉 bug 也许在 updateLabel() 函数的某部地点。你不要逐行看完全数代码,能够换用另一种断点,在周边该 bug 的任务暂停代码运维。

步骤4:设置另八个断点

代码行断点是最分布的断点类型。假如想在实行到某一行代码时暂停,就选拔代码行断点。试试吧:

翻开 updateLabel() 中的最终一行代码,如下所示:

label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;

在代码的左臂,你可以看来那行代码的切进行数:32。点击 32,DevTools 会在 32 上放置叁个玛瑙红Logo,表示在这里安装了几个代码行断点。这样以来,DevTools 总会在奉行那行代码前暂停。

点击“Resume script execution”按钮

&lt;img src="" data-caption="" data-size="normal" data-rawwidth="26" data-rawheight="20" width="26"&gt;

太阳集团太阳娱乐登录 9

这段脚本会持续实行,直到达到你设置了断点的这行代码。

翻看 updateLabel() 中已实行的代码行。DevTools 打字与印刷输出 addend1,addend2 和 sum 的值。

Sum 的值瞅着很有题目,求值结果应该是数字才对,但那边却是字符串。那或者正是引致 bug 的案由。

步骤5:检查变量值

以致 bug 的另一个广泛原因正是变量或函数爆发了要命值。比很多开垦者会使用 console.log() 来查看值随着时间变化的事态,但利用 console.log() 枯燥又辛劳,何况从不作用。究其原因有二,首先你或然须要手动编辑代码,并且亟需一大波调用 console.log();其次,你只怕不可能鲜明哪些变量和 bug 有关,所以你须求记录相当多变量。

DevTools 上有个代表 console.log() 的工具叫 Watch Expressions,使用 Watch Expressions 能够监督变量值随着年华的浮动。正如其名,Watch Expressions 并不仅能监控变量,你能够将其余有效的 JavaScript 表明式存款和储蓄在 沃特ch Expressions 中。试试啊:

在 DevTools 上的“Source”面板上点击“Watch”,然后那部分交易会开。

点击“Add Expression”

&lt;img src="" data-caption="" data-size="normal" data-rawwidth="20" data-rawheight="20" width="20"&gt;

太阳集团太阳娱乐登录 10

输入 typeof sum

按 Enter 键,DevTools 会显示 typeof sum: "string"。冒号右侧的值便是您的 Watch Expression 的结果。

&lt;img src="" data-caption="" data-size="normal" data-rawwidth="800" data-rawheight="541" width="800" data-original=";

太阳集团太阳娱乐登录 11

和我们猜的同等,sum 被管理成了字符串,而本应是个数字。那就是 demo 上的 bug 的发源。

DevTools 中另一个能代表 console.log() 的工具是 Console,能够动用 Console 对私下 JavaScript 语句求值。相当多开拓者平时在调 bug 时应用 Console 覆盖变量值。在本教程这些事例中,Console 能帮您测量试验刚开采的 bug 的神秘修复方法。试试:

只要还没张开 Console,按 Escape 键打开它,会在您的 DevTools 窗口底部展开。

在 Console 中输入 parseInt + parseInt

按 Enter 键,DevTools 会对语句求值,输出 6,约等于起始 德姆o 中我们预料程序应该出口的结果。

&lt;img src="" data-caption="" data-size="normal" data-rawwidth="800" data-rawheight="608" width="800" data-original=";

太阳集团太阳娱乐登录 12

步骤6:应用修复方法

规定一种修复 bug 的秘闻方法后,剩下的干活正是编辑代码,尝试修复,并再一次运行demo。不必离开 DevTools 分界面就能够利用修复。你可以直接在 DevTools UI 里直接编辑 JavaScript 代码。试试啊:

在 DevTools 的“Source”面板的代码编辑器中,用 var sum = parseInt + parseInt 替换 var sum = addend1 + addend2。就是当前暂停地点上面的那行代码。

按 Command+S或 Ctrl+S(Windows,Linux)保存修改。代码背景象变为银色,表示脚本早已在 DevTools 中被涂改。

点击“Deactivate breakpoints”

&lt;img src="" data-caption="" data-size="normal" data-rawwidth="19" data-rawheight="17" width="19"&gt;

太阳集团太阳娱乐登录 13

它形成青色代表正处在活动状态。假如那样设置,DevTools 会忽略你设置的另外断点。

点击“ Resume script execution”

&lt;img src="" data-caption="" data-size="normal" data-rawwidth="26" data-rawheight="20" width="26"&gt;

太阳集团太阳娱乐登录 14

能够用差别的值试试吧,未来 demo 应该能科学地质度量算出 sum 值了。

只顾:该专业流程只对运维在浏览器中的代码应用考订。它不会为保有运营你的页面包车型地铁客户考订代码。要想实现该目标,须要改正运行在提供页面的服务器上的代码。

上述便是在 DevTools 中调养 JavaScript bug 的基础知识,本文只介绍了两种设置断点的措施,其它还只怕有好些个居多另外格局,比方:

仅在满意你钦定的基准时接触的基准断点。

发出已破获或未捕获非常时接触的断点。

当呼吁的网站和你提供的子字符串相称时触发的 XH中华V 断点。

越来越多利用 DevTools 调节和测量试验 bug 的文化,能够查阅官方文档。

本文由澳门太阳娱乐集团官网发布于脚本专栏,转载请注明出处:前端如何调试 | JavaScript如何调试 | 浏览器如何调

上一篇:没有了 下一篇:【太阳集团太阳娱乐登录】程序员跳槽到民企后
猜你喜欢
热门排行
精彩图文