1. Rapid Debug Combat 1 (Browser – Basics)

2. Rapid Debug Combat ii (Browser – Online Part 1)

3. Rapid Debug (Node-webpack plugin, Babel plugin,vue source code)

Now that we know the basics of debugging, how can we quickly debug some problems online? This article divides online debugging into the following three types :(of course, there are better debugging methods, which can be suggested in the comments section)

  1. Online instant modification; Make quick changes to a bug-fixing pattern for styles and js that already know the problem is there.
  2. Proxying to native code; This situation resolves inconsistencies between online code and local code, and makes it very easy to insert code into the source code for immediate debugging
  3. SourceMap not available online enable local sourceMap Sometimes problems don’t appear to be problems at first glance, but sourceMap is not available online so we can start local sourceMap to help us locate the problem.

Note that the following yifenghua. Win domain logoff, replaced by https://hua1995116.github.io/myblog/

So the example passes in the following environment.

Operating system: MacOS 10.13.4

Chrome: Version 72.0.3626.81 (official) (64-bit)

Live Modification online

Open the function

When debugging a problem on the debug line, we have a problem such as: I need to modify the style directly on the page to quickly locate the problem, it may be that some style is not compatible, rendering is not successful. But every time we’re done with devTools, we want to refresh the page. At this point, all of our modifications are gone. Here’s a feature that allows you to debug online problems and stay current.

Chrome devTools has a feature called Overrides. This feature is very helpful for debugging online

  1. Open: hua1995116. Making. IO/myblog/exam…
  2. By pressing theCommand+Option+I (Mac) 或 Control+Shift+I (Windows, Linux)To open DevTools. This shortcut opens the Console panel.
  3. Click the Source button

  1. Click the button shown in the arrow, find Overrides, and select.

  2. Click Select Folders for Overrides. Select a local empty folder directory.

  3. Jump out of authorization and click Permit

start

This is the page we just had

Let’s say our design requires us to change the background color to red and the font size to 22px. Let’s modify it. Refresh the page after the modification. This is what I found when I opened it.

Continue clicking on the Source TAB. Click the Page button.

Open our demo3.html, change the title in head to debug03, and save (MAC: Command + S, Windows: CTRL + S).

Refresh the page again and find that our page title has been successfully modified.

Finally, we click on demo3.js in source Page. The card. The text = ‘123’; Change to card.text = ‘hello’; , continue to save.

All right. We’ve made all our changes.

You can see that all of our files have a little blue dot underneath them. This is the modified file stored in the folder that you selected in the beginning.

See the diff

So how do we see what we’ve changed before?

Continue to open devTools and click on the three dots in the upper right corner -> More Tools -> Changes

You can see all the changes we just made.

At this point we have completed the Overrides debug line method.

Proxying to native code

First, you need to download Charles and any other proxy tool is ok, as long as you can proxy the request locally. Here I will use Charles which I am familiar with. So what are the main problems that this approach can debug on the line?

  1. Quickly verify that the local version is consistent with the online version. If there is nothing wrong with the local file, there is something wrong with the online file, then just pack it again. (Ignore the version number if there is one)
  2. Debug code.

Debugging code

Let’s show you how to debug code on the line.

Let’s say the above is our local project. So to demonstrate, you need to do the following steps.

git clone https://github.com/hua1995116/debug.git

cd debug

cdCharles-debug NPM install NPX webpack --watch --progress (NPM >= v5.2.0)Copy the code

The js that we packaged will then be generated in our dist directory

  1. Open: hua1995116. Making. IO/myblog/exam…

  2. Open devTools’ netWork to view the JS path. Hua1995116. Making. IO/myblog/exam…

  3. Open our Charles (well, I will not explain how to configure and use, baidu and Google yourself)

  4. Click Map Local in Tools to configure.

  1. Add a rule

  1. Map the URL in the netWork to the local address (the location of our Clone project), as shown in the figure

  1. Make changes to our local content. Change to the following
const card = document.querySelector('.card-link');
card.onclick = function() {
  card.text = 'hello';
}
Copy the code

  1. Open our page again hua1995116. Making. IO/myblog/exam…

  2. Check Charles logs

You can see that the file has been successfully mapped locally. This way, we can debug our online files in real time. You can insert various markers and debugger.

SourceMap does not exist online Enable local sourceMap

Well, in addition, we can add sourceMap via Charles.

To modify the clone project, modify webpack.config.js and index.js

webpack.config.js

module.exports = {
    entry: './index.js'.output: {
        filename:'demo3.js'
    },
    devtool: 'source-map'};Copy the code

index.js

const card = document.querySelector('.card-link');
card.onclick = function() {
   console.log(ss);
   card.text = 'hello';
}
Copy the code

run

npx webpack --watch --progress
Copy the code

Add another Map Local to Charles

Now open the hua1995116. Making. IO/myblog/exam…

Click Card link to find an error.

Click on index.js to see our source code directly located.

conclusion

There are three ways to debug online code. It should be said that we can locate the vast majority of the problems. If you have a better way to leave a message, let’s learn together. (Slip away

Pay more attention

Huayifeng. top/