未加星标

Get Started with Debugging JavaScript in Chrome DevTools

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

This step-by-step, interactive tutorial teaches you the basic workflow for debugging javascript in Chrome DevTools. The tutorial shows you how to debug one specific issue, but the general workflow you learn is helpful for debugging all types of JavaScript bugs.

If you're using console.log() to find and fix bugs in your code, consider using the workflow outlined in this tutorial instead. It's often much faster and more effective.

Step 1: Reproduce the bug

Reproducing the bug is always the first step to debugging. To "reproduce the bug" means to find a series of actions that consistently causes the bug to appear. You may need to reproduce the bug many times, so try to eliminate any unnecessary steps.

Follow along with the instructions below to reproduce the bug that you're going to fix in this tutorial.

Click Open Demo . The demo opens in a new tab.

On the demo, enter 5 for Number 1 .

Enter 1 for Number 2 . Click Add Number 1 and Number 2 . Look at the label below the inputs and button. It says 5 + 1 = 51 .

Whoops. That result is wrong. The result should be 6 . This is the bug that you're going to fix.

Step 2: Pause the code with a breakpoint

DevTools lets you pause your code in the middle of its execution, and examine the values of all variables at that moment in time. The tool for pausing your code is called a breakpoint . Try it now:

Open DevTools on the demo by pressing Command + Option + I (Mac) or Control + Shift + I (windows, linux).

Click the Sources tab.

Click Event Listener Breakpoints to expand the section. DevTools reveals a list of expandable event categories, such as Animation and Clipboard . Next to the Mouse event category, click Expand
Get Started with Debugging JavaScript in Chrome DevTools
. DevTools reveals a list of mouse events, such as click , with checkboxes next to them.

Check the click checkbox.


Get Started with Debugging JavaScript in Chrome DevTools
Figure 1 : DevTools opened on the demo, with the Sources panel in focus and click event listener breakpoints enabled. If your DevTools window is large, the location of the Event Listener Breakpoints pane is on the right, rather than the bottom-left, like in the screenshot.

Back on the demo, click Add Number 1 and Number 2 again. DevTools pauses the demo and highlights a line of code in the Sources panel. DevTools highlights this line of code:

function onClick() {

When you checked the click checkbox, you set up an event-based breakpoint on all click events. When any node is clicked, and that node has a click handler, DevTools automatically pauses on the first line of that node's click handler.

Step 3: Step through the code

One common cause of bugs is when a script executes in the wrong order. Stepping through your code enables you to walk through your code's execution, one line at a time, and figure out exactly where it's executing in a different order than you expected. Try it now:

On the Sources panel of DevTools, click Step into next function call
Get Started with Debugging JavaScript in Chrome DevTools
to step through the execution of the onClick() function, one line at a time. DevTools highlights the following line of code:

if (inputsAreEmpty()) {

Click Step over next function call
Get Started with Debugging JavaScript in Chrome DevTools
. DevTools executes inputsAreEmpty() without stepping into it. Notice how DevTools skips a few lines of code. This is because inputsAreEmpty() evaluated to false, so the if statement's block of code didn't execute.

That's the basic idea of stepping through code. If you look at the code in get-started.js , you can see that the bug is probably somewhere in the updateLabel() function. Rather than stepping through every line of code, you can use another type of breakpoint to pause the code closer to the location of the bug.

Step 4: Set another breakpoint

Line-of-code breakpoints are the most common type of breakpoint. When you've got a specific line of code that you want to pause on, use a line-of-code breakpoint. Try it now:

Look at the last line of code in updateLabel() , which looks like this:

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

To the left of this code, you can see the line number of this particular line of code: 32 . Click on 32 . DevTools puts a blue icon on top of 32 . This means that there is a line-of-code breakpoint on this line. DevTools now always pauses before this line of code is executed.

Click Resume script execution
Get Started with Debugging JavaScript in Chrome DevTools
. The script continues executing until it reaches the line of code you placed the breakpoint on. Look at the lines of code in updateLabel() that have already executed. DevTools prints out the values of addend1 , addend2 , and sum .

The value of sum looks suspicious. It looks like it's being evaluated as a string, when it should be a number. This may be the cause of the bug.

Step 5: Check variable values

Another common cause of bugs is when a variable or function produces a different value than expected. Many developers use console.log() to see how values change over time, but console.log() can be tedious and ineffective for two reasons. One, you may need to manually edit your code with lots of calls to console.log() . Two, you may not know exactly which variable is related to the bug, so you may need to log out many variables.

One DevTools alternative to console.log() is Watch Expressions. Use Watch Expressions to monitor the value of variables over time. As the name implies, Watch Expressions aren't just limited to variables. You can store any valid JavaScript expression in a Watch Expression. Try it now:

On the Sources panel of DevTools, click Watch . The section expands. Click Add Expression
Get Started with Debugging JavaScript in Chrome DevTools
. Type typeof sum .

Press Enter . DevTools shows typeof sum: "string" . The value to the right of the colon is the result of your Watch Expression.


Get Started with Debugging JavaScript in Chrome DevTools
Figure 1 : The Watch Expression pane (bottom-right), after creating the typeof sum Watch Expression. If your DevTools window is large, the Watch Expression pane is on the right, above the Event Listener Breakpoints pane.

As suspected, sum is being evaluated as a string, when it should be a number. This is the cause of the demo's bug.

A second DevTools alternative to console.log() is the Console. Use the Console to evaluate arbitrary JavaScript statements. Developers commonly use the Console to overwrite the variable values when debugging. In your case, the Console can help you test out potential fixes for the bug you just discovered. Try it now:

If you don't have the Console drawer open, press Escape to open it. It opens at the bottom of your DevTools window. In the Console, type parseInt(addend1) + parseInt(addend2) .

Press Enter . DevTools evaluates the statement and prints out 6 , which is the result you expect the demo to produce.


Get Started with Debugging JavaScript in Chrome DevTools
Figure 1 : The Console drawer, after evaluating parseInt(addend1) + parseInt(addend2) . Step 6: Apply a fix

You've identified a potential fix for the bug. All that's left is to try out your fix by editing the code and re-running the demo. You don't need to leave DevTools to apply the fix. You can edit JavaScript code directly within the DevTools UI. Try it now:

In the code editor on the Sources panel of DevTools, replace var sum = addend1 + addend2 with var sum = parseInt(addend1) + parseInt(addend2); . This is one line above where you are currently paused. Press Command + S (Mac) or Control + S (Windows, Linux) to save your change. The background of the code changes to red to indicate that the script has been changed within DevTools. Click Deactivate breakpoints
Get Started with Debugging JavaScript in Chrome DevTools
. It changes blue to indicate that it is active. While this is set, DevTools ignores any breakpoints you've set. Click Resume script execution
Get Started with Debugging JavaScript in Chrome DevTools
. Try out the demo with different values. The demo should now be calculating the sums correctly.

Keep in mind that this workflow only applies a fix to the code that is running in your browser. It won't fix the code for all users that run your page. To do that, you need to fix the code that's running on the servers that serve your page.

Next steps

Congratulations! You now know the basics of debugging JavaScript in DevTools.

This tutorial only showed you two ways to set breakpoints. DevTools offers many other ways, including:

Conditional breakpoints that are only triggered when the condition that you provide is true. Breakpoints on caught or uncaught exceptions. XHR breakpoints that are triggered when the requested URL matches a substring that you provide.

There's a couple of code stepping controls that weren't explained in this tutorial. Check out the link below to learn more about them.

Feedback

Help us make this tutorial better by answering the questions below.

[This section requires a browser that supports JavaScript and iframes.]

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: JavaJavaScriptChromeLinuxWindows
分页:12
转载请注明
本文标题:Get Started with Debugging JavaScript in Chrome DevTools
本站链接:http://www.codesec.net/view/524055.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(51)