Five JavaScript and Web debug technologies you need to know

Ext.: http://js8.in/2013/11/20/%E4%BA%94%E4%B8%AA%E4%BD%A0%E5%BF%85%E9%A1%BB%E7%9F%A5%E9%81%93%E7%9A%84javascript% e5%92%8cweb-debug%e6%8a%80%e6%9c%af/

In front-end development, debugging technology is an essential skill, this article will introduce five kinds of front-end development necessary debugging technology.

1. Weinre Mobile Debugging
2. DOM Breakpoint
3. Debugger Breakpoint
4. Native Method Hook
5. Remote mapping Local debugging

Weinre

Developing and debugging on the move is very complex, so there is a weinre. Install weinre can implement PC to debug phone page, so for mobile development debugging is very important OH ~

Http://people.apache.org/~pmuellr/weinre/docs/latest/images/weinre-demo.jpg

Installing Weinre

Weinre can be installed via NPM:

1	NPM install-g weinre

After the installation is complete, execute the following command to start:

1	8080--boundhost-all-

This way to access your own 127.0.0.1:8080 follow the prompts to insert a section of JS in the Debugging page, and then you can debug. The interface is similar to Chrome's DevTools, you can see the http://people.apache.org/~pmuellr/weinre/docs/latest/Running.html tutorial

Principle

Through the need to debug the page to introduce a section of Weinre JS, the PC and mobile phone socket communication, so as to achieve real-time debugging.

Tips

1. If you have to be in the debug page every time to introduce JS trouble, you can make a bookmark or Chrome plugin
2. If you have trouble installing, you can use PhoneGap's weinre:http://debug.phonegap.com/

Dom Breakpoint

Dom Breakpoints are a feature provided by Firebug and Chrome devtools that automatically pauses when JS needs to manipulate the DOM of the breakpoint, similar to debugger debugging.

Using DOM breakpoints

1. Select the DOM node you want to break point to
2. Right-click to selectBreak on..
3. Select a breakpoint type

Dom Breakpoint

Tips

• Firebug, Dom breakpoints can be seen in script> breakpoints
• In Chrome devtools, you need to see in the DOM breakpoints of the elements panel

JavaScript's Debugger statement

Need to debug JS, we can give the need to debug the place through the debugger break point, code execution to the breakpoint will be tentative, this time through the single-step debugging and other ways to debug JS code

breakpoints that use JavaScript

Add in places where you need to break points debugger :

123	if (Waldo) {debugger;}

When you open the console panel, you can debug the

Tips

If you don't know how to debug, then look as soon as possible: tutorial on the Chrome devtools break point section

Hook Debugging for native code

Because the browser will be built into some of window these native JS methods of similar objects, when you know that the native code does have a problem, but you can not track debugging, you will be able to use this method.

As an example,

For example, we notice that a DOM property value has changed, but we don't know where the code is causing the change, so we can give a breakpoint to the DOM element setAttribute , the code is as follows:

12345678

(attr, value) { "The_droids_you_are_looking_for") {debugger;} oldfn.call (This, attr, value);}

This way, when the attribute of the element changes, it executes to the breakpoint, and you can find the place of the call in the stack of the breakpoint ~

Tips

This method is not guaranteed to work in all browsers, such as iOS Safari privacy mode, we can not modify the localStorage method

Remote mapping Local debugging

When there is a problem with a js/css on the line, we can use the proxy method, the remote file proxy to local to achieve remote mapping debugging. In fact, in addition to this function, it can also be used as a grab bag tool, which is very important on the mobile side. Recommended for Mac charles Proxy (http://www.charlesproxy.com/), used by Windows users fiddler (http://fiddler2.com/)

This is not much to say, directly on the domestic articles:

• Http://www.cnblogs.com/tankxiao/archive/2012/02/06/2337728.html
• Http://www.cnblogs.com/TankXiao/p/3063871.html

Original reading (This article is not fully translated, has expanded): http://techblog.badoo.com/blog/2013/11/18/5- advanced-javascript-and-web-debugging-techniques-you-should-know-about/

Related articles:

http://blog.csdn.net/alexwang1983/article/details/16882163

Http://msdn.microsoft.com/zh-cn/library/ie/0bwt76sk (v=vs.94). aspx