Introduction to five common web debug debugging plug-ins in javascript

Source: Internet
Author: User
Tags chrome devtools

If you do not know how to use these web debug debugging plug-ins in front-end development, I will summarize the five js and web debug debugging plug-ins, I hope it will be helpful to you.

Debugging technology is essential in front-end development. This article will introduce five debugging technologies necessary for front-end development.

  1. Weinre mobile debugging
  2. DOM breakpoint
  3. Debugger breakpoint
  4. Native METHOD hook
  5. Remote ing local debugging
Weinre

Development and debugging on mobile devices are complicated, so there isWeinre. Installing weinre can enable pc debugging for mobile phone pages, so it is very important for mobile development debugging ~

Install weinre

Weinre can be installed through npm:

 
 
The Code is as follows: Copy code
npm install -g weinre

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

 
 
The Code is as follows: Copy code
weinre --httpPort 8080 --boundHost -all-


In this way, access your own 127.0.0.1: 8080 and insert a piece of js in the debugging page as prompted, and then you can debug it. Operation Interface similar to Chrome DevTools, specific operations can see the http://people.apache.org /~ Pmuellr/weinre/docs/latest/Running.html tutorial

Principle

Introduce a weinre js in the page to be debugged to implement socket communication between the pc and the mobile phone, so as to realize real-time debugging.

Tips
  1. If you want to introduce JavaScript code to the debugging page every time, you can make a bookmarkdonor chrome plug-in.
  2. If installation is too troublesome, you can use the weinre: http://debug.phonegap.com/phonegap/
DOM breakpoint

DOM breakpointIs a function provided by Firebug and chrome DevTools. When JavaScript needs to operate the breakpoint DOM, it will be automatically suspended, similar to debugger debugging.

Use DOM breakpoint
  1. Select the DOM node you want to breakpoint
  2. Right-clickBreak on..
  3. Select the breakpoint type

Tips
  • In Firebug, DOM breakpoint can be seen in Script> Breakpoints
  • In chrome DevTools, you need to see it in DOM Breakpoints on the Elements panel.
Javascript debugger statement

When you need to debug js, we can passdebuggerWhen you open a breakpoint, the code execution will be tentative when it reaches the breakpoint. At this time, you can debug the js Code in a single step.

Use javascript breakpoint

Add a checkpointdebugger:

123
if (waldo) {debugger;}

 

In this case, open the console panel and you will be able to debug it.

Tips

If you do not know how to debug it, read the breakpoint section of Chrome DevTools as soon as possible.

Hook debugging of native code

Because the browser will build some similarwindowObjects, such as native js methods, can be used when you know that native code is indeed faulty, but you cannot track debugging.

For example

For example, we noticed that the attribute value of a DOM has changed, but we do not know where the code is causing the change, so we can give the DOM ElementsetAttributeThe Code is as follows:

12345678
var oldFn = Element.prototype.setAttribute;Element.prototype.setAttribute = function (attr, value) {    if (value === "the_droids_you_are_looking_for") {        debugger;    }    oldFn.call(this, attr, value);}

 

In this way, when the attribute of the element changes, it will be executed to the breakpoint, you can find the place to call in the breakpoint stack ~

Tips

This method is not guaranteed to be valid in all browsers. For example, in the safari private mode of ios, we cannot modifylocalStorageMethod

Remote ing local debugging

When a js/css file has a problem online, we can use the proxy method to proxy remote files to local for remote ing debugging. In fact, in addition to this function, it can also be used as a packet capture tool, which is very important on the Mobile End.

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.