What are the tips and tricks for JavaScript debugging? Attach five useful debugging tools _javascript tips

The following is a description of how JavaScript can debug suggestions and techniques, please see below for details.

Browser developer Tools

I personally like the Chrome developer tool. While Safari and Firefox are not up to the standards of chrome, they are also gradually improving. In Firefox, you can combine the Firebug with the Firefox developer tool. If the Firefox team continues to excel in improving the built-in developer tools, Firebug may one day be eliminated.

By putting your personal preferences aside, you should be able to test and debug arbitrary code in the target browser. Your target browser may include the famous IE8, or it may not be included.
Be familiar with your own choice of developer tools. You can also obtain additional debugging support from the IDE (integrated development environment) or third party software.

In a variety of debugging tools, the basics of debugging are interlinked. In fact, I was in the 90 's from Borland's C developer environment to learn from the debugging base. breakpoints, conditional breakpoints, and monitoring are exactly the same as the latest version of the Chrome developer tool. 2000 years or so, I caught the first exception in Java. The concept of a stack trace is still applicable, and even if the JavaScript terminology calls it a fault (error), checking the stack trace is still as useful as ever.

Some knowledge points are unique to front-end development. For example:

Dom Check
Dom Breakpoint
Debug events
Memory leak analysis

Breakpoint

Use the debugger statement to add breakpoints in your source code. Once the debugger statement is reached, execution is interrupted. The context of the current scope appears in the console, with all local and global variables. You can view the value of a variable by moving the mouse cursor over the variable.

You can also create conditional breakpoints in your code:

Javascript

if (condition) {
 debugger;
}

You can also insert breakpoints and conditional breakpoints in the developer tool as you want. In the Chrome Developer tool, clicking the line number in the sources view increases the breakpoint. You can also increase the breakpoint condition if you right-click on the breakpoint and choose Edit Breakpoint.

Breakpoint for node change

If your task is to debug your spam code, you may have a problem with why the DOM node has changed during execution. The Chrome Developer tool provides a convenient breakpoint that can be used to detect node changes in the element tree.

In the Elements view, right-click an element and select "Break on ..." from the right-click menu.

Breakpoint for node change

The types of Dom breakpoints may include:

Node changes in the selected node tree plaint directory (sub-tree),
The properties of the selected node have changed.
The node is deleted.

Avoid record reference types

When you record an object or array, the value of the original type may change in the Reference object record. When viewing reference types, it is important to remember that code execution may affect the observed results during recording and viewing.

For example, execute the following code in the Chrome developer tool:

Javascript

var wallets = [{amount:0}];
SetInterval (function () {
 console.log (wallets, wallets[0), wallets[0].amount);
 Wallets[0].amount +;
}, 1000);

The value of the second and third attributes of the record is correct, and the value of the object reference in the first attribute is unreliable. When you first display this attribute in the developer tool, the value of the Amount field is determined. No matter how many times you close and reopen the same reference, this value will not change.

Record reference type

Always remember what you are recording. A watch expression with a breakpoint is used when the original type is logged. If this is an asynchronous code, avoid recording reference types.

Table record

In some developer tools, you can use Console.table to record an array of objects in the console.

Try executing the following code in your Chrome developer tool:

Javascript

Console.table (
 [
 { 
  id:1, 
  name: ' John ', address 
  : ' Bay Street 1 '
 }, 
 {
  id:2, 
  name: ' Jack ', address 
  : ' Valley Road 2 '
 }, 
 {
  id:3, 
  name: ' Jim ', address 
  : ' Hill Street 3. ' 
 }
 ] );

The output is a very nice table. All the original types are immediately displayed and their values reflect the state of the record. You can also record complex types, display the content as its type, and the content cannot be displayed. Therefore, console.table can only be used to display two-dimensional data structures consisting of objects with original type values.

XHR Breakpoint

Sometimes you may encounter the wrong Ajax request. XHR breakpoints can help you save time if you can't immediately confirm the code to submit the request. When submitting a particular type of Ajax, the XHR breakpoint terminates execution of the code and renders the code snippet for the request to the user.

In the Sources tab of the Chrome Developer tool, one of the breakpoint types is the XHR breakpoint. Click the + icon, you can enter a URL fragment, when the Ajax request URL in this URL fragment, JavaScript code will be interrupted.

Event Listener Breakpoint

The Chrome developer tool captures all types of events, and when the user presses a key and clicks the mouse, it can debug the triggered event.

Pause when exception

The Chrome developer tool can pause the execution of JavaScript code when throwing an exception. This allows you to observe the state of the application when the Error object is created.

Pause when exception

Code fragment

The Sources tab page has a code fragment (snippet) Child tab on the left panel that can be used to save code snippets and debug your code.

If you stick with console debugging and write the same code over and over again, you should abstract your code into a debug fragment. In this way, you can even educate your co-workers about your debugging skills.

Paul Irish has published some basic pieces of debugging code, such as inserting a breakpoint before the function executes. It is valuable to review these snippets of code and search for other snippets of code on the Web.

Insert a breakpoint before the function executes

If you can get the source code for a function call, you can also insert a breakpoint before the function call to terminate the execution of the function. If you want to debug the F function, use the debug (f) Statement to add this breakpoint.

Unminify Minimize Code

(Translator Note: unminify decompression and reverse confusion)

Use the source map whenever possible. Sometimes the production code cannot use the source map, but in any case, you should not debug the Production code directly.

(Translator Note: Sourcemap is a tool for debugging after compressing merged web code)

If there is no source map, you can finally turn to the format button (pretty Print button) in the Sources tab of the Chrome developer tool. The format button {} is located below the source code text area. The formatting buttons beautify the source code and change the line number, which makes debugging code more convenient and the stack trace more efficient.

Formatting buttons are used only when they are forced to do so. In a sense, the ugly code is ugly because the naming in the code has no explicit semantics.

Console bookmarks for DOM elements

Both Chrome developer tools and Firebug provide bookmarks to display the last-clicked DOM element in the Element tab (chrome) or HTML tag page (Firebug). If you select the A element, the B element and the C element in turn,

$ = c Element
Represent B element
$ $ Represents a element
If you select Element D again, then $, $, $ and $ are represented in D, C, B, and a respectively.

Accessing the Call stack

Javascript

var f = function () {g ();} 
var g = function () {h ();}
var h = function () {console.trace (' Trace in H ');}
f ();

The Sources tab in the Chrome Developer tool also displays the call stack below the watch expression.

Performance Review

Performance review tools are often useful. These tools can be used to prevent memory leaks and to detect where your site needs to be optimized. Since these tools do not understand your product, you can ignore some of its recommendations. In general, performance analysis tools can be effective enough to make your site significantly more optimized.

Examples of review tools:

Audit tab for Chrome developer tools
Yslow

Practice

You may be familiar with some debugging techniques, and other techniques will save you a lot of time. If you start using these techniques in practice, I suggest you read this again in a few weeks. You will be amazed to find that your focus has changed in a matter of weeks.

Five Common JS Debugging tools

JavaScript is called a prototype (prototype) based language. This language has many characteristics, such as dynamic and weak types, and it also has a first-class function (the "class functions"). Another feature is that it is a multi-paradigm language that supports object-oriented, declarative, functional-style programming.

JavaScript was originally used as the client language, and the browser implements it to provide an enhanced user interface. JavaScript is used in many modern web sites and Web applications. One of the great features of JavaScript is that I can actually use it to improve or improve the site's user experience. JavaScript can also provide rich functionality and interactive components.

JavaScript has become very popular at a time when the technology is growing fast. Because popular JavaScript has improved a lot, there's a lot to be done to modify JavaScript scripts. This time we've brought a few very useful JavaScript debugging tools for developers.

1) Drosera

You can debug any WebKit program, not just Safari browser.

2) Dragonfly

The source code view has syntax highlighting and you can set breakpoints. Powerful search function that supports regular expressions.

3) Getfirebug

You can edit, debug, and monitor CSS, HTML, and JavaScript in real time on any Web page.

4) Debugbar

5) Venkman

Venkman is Mozilla's JavaScript debugger name. It is designed to provide a powerful JavaScript debugging environment for Mozilla based browsers (Firefox, Netscape 7.x/9.x and SeaMonkey).

The above is a description of how JavaScript can debug the recommendations and tips and five common debugging tools, I hope you like.