Use firebug to debug javascript (1)

Source: Internet
Author: User
This article introduces two aspects: 1. firebug installation. 2. program debugging 1. the firefox browser must be installed to install firebug1.1. It's human capital. 1.2 select an additional component in the tool and enter firebug in the right-side search bar on the open additional component Manager page if you have not installed... SyntaxHighlighter. all ()

This article introduces two aspects: 1. firebug installation. 2. program debugging

1. Install firebug
1.1 The firefox browser must be installed. It's human capital.
1.2 select "additional components" in the tool"

 
Enter firebug in the right-side search bar on the additional component Manager page.
If you have not installed firebug, the following icon appears. Click "Install ".

1.3 wait until the installation is complete and restart the browser
2. Open firebug to view js source code
2.1 First open the file to be viewed in the browser. At this time, there are two ways to open firebug.
First, click the icon in the upper-right corner of the browser.
In addition, right-click any position on the page and select "view element with firebug"
2.2 In general, the page for viewing html elements is first displayed.

2.3 click "script" on the top of the page.


Click "reload" to view the source code.


If no source code is displayed on this page, it indicates that there is a syntax error in the source code. You must modify the syntax error first. Common Errors include: unpaired parentheses, missing function return values, undefined variables, and case-insensitive errors.

You can use this function to detect syntax errors in the code.

[Javascript]
Function handleErr (msg, url, l)
{
Txt = "This page contains errors. \ N"
Txt + = "error:" + msg + "\ n"
Txt + = "URL:" + url + "\ n"
Txt + = "row:" + l + "\ n"
Txt + = "click" OK "to continue. \ N"
Alert (txt)
Return true
}
3. debug js Code
3.1 create a breakpoint

Click the left mouse button in front of the row to create a breakpoint. Click the left mouse button again to cancel the breakpoint. When you open the same file again, you will remember the previous breakpoint line.
3.2 start debugging
Return to the html page and press f5 to refresh the page. The program on the firebug page automatically runs to a breakpoint. (If the current branch does not reach this point, check the logic)
3.3 view Variables
The variable value of the current breakpoint can be displayed in "monitoring" on the right.

To view more variables, move the cursor over the variable to display the current value of the variable.

You can also right-click the variable and select "add monitoring" in the pop-up box. The value is displayed in the monitoring column.

3.4 debugging

Click the button in the upper-right corner to run to the next breakpoint or on a row-by-row basis. While running, you can view the variable value through monitoring to check whether the program runs correctly.
3.5 modify the program
After finding the problem, you need to modify it in a text editor. I use Notepad ++. Save the modified Code and return to the html page of the browser. Press f5 to refresh the code in firebug. Then proceed to 3.1 ~ 3.4 until there is no program error.
3.6 It is recommended that you write and debug the program. Writing the program is the correct program.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.