How to debug JS

Installation is easy, just find FireBug in the plugin library on FireFox. Below is the FireBug Debug window.

< img border = 0 height = 333 Alt = "" SRC =" / / files.jb51.net/file_images/article/201312/201312230003562.gif width = 733 "border = 0 >

        FireBug art is very common, the company art sister is very skilled with ha ha, and for our developers, mainly use it to Debug JS. Check out the official introduction to Debug.
  Firebug, includes a powerful JavaScript debugger that lets you pause execution at any time and see what each variable looked like at that moment. If your code is a little sluggish, Use the JavaScript profiler to measure the performance and find bottlenecks fast.
          In short, FireBug lets you debugJS at any time and look at variables, as well as identify performance bottlenecks in JS.
          Below is how to find JS for your Web application, activate Firebug, click Script, and then select the JS you want to Debug next to All.

< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201312/201312230003563.gif "border = 0 >

The following figure shows how the break point is basically the same as Eclipse. Click the line number and it will be Ok.

< img border = 0 height = 164 Alt = "" SRC =" / / files.jb51.net/file_images/article/201312/201312230003564.gif width = 214 "border = 0 >

The following figure shows how to set a condition on a breakpoint and then enter the breakpoint if the condition is correct.

< img border = 0 height = 164 Alt = "" SRC =" / / files.jb51.net/file_images/article/201312/201312230003565.gif width = 214 "border = 0 >

  The following figure shows how to step debug, just like Eclipse F11 step

< img border = 0 height = 164 Alt = "" SRC =" / / files.jb51.net/file_images/article/201312/201312230003566.gif width = 214 "border = 0 >

The following is a look at the called Stack, which is useful for complex JS Debug.

< img border = 0 height = 164 Alt = "" SRC =" / / files.jb51.net/file_images/article/201312/201312230003567.gif width = 214 "border = 0 >

The following figure shows the view variables that are basically the same as EclipseDebug.

< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201312/201312230003568.gif "border = 0 >

The following figure shows the variables at the breakpoint.

< img border = 0 height = 164 Alt = "" SRC =" / / files.jb51.net/file_images/article/201312/201312230003569.gif width = 214 "border = 0 >

There is a very useful function, the code line to quickly turn between lines, so that thousands of lines of JS debugging is very easy.

< img border = 0 height = 164 Alt = "" SRC =" / / files.jb51.net/file_images/article/201312/2013122300035610.gif width = 214 "border = 0 >

The following figure shows the Performance test results using a simple Profile

< img border = 0 height = 164 Alt = "" SRC =" / / files.jb51.net/file_images/article/201312/2013122300035611.gif width = 214 "border = 0 >

There's also a useful Log feature, which is great if you don't want to hit breakpoints every time.