Youth Training Camp | "Development and Debugging Knowledge that Front-end Must Know"

title: Youth Training Camp | "Development and Debugging Knowledge that Front-end Must Know"
link: note/front-end/bytedance-note/development-and-debugging
catalog: true
date: 2022-01-20 14:30:17
subtitle: Debugging using Chorme devTools, mobile debugging, etc.
lang: en
tags:

CSS
JavaScript
Front-end
Debugging
categories:
[Notes, Youth Training Camp Notes]

Characteristics of Front-end Debugging#

Multiple Platforms

Browsers, Hybrid, NodeJs, Mini Programs, Desktop Applications...

Multiple Environments

Local development environment, online environment

Multiple Tools

Chrome devTools, Charles, Spy-Debugger, Whistle, vConsole...

Multiple Techniques

Console, BreakPoint, sourceMap, proxy...

Chorme devTools#

Chorme devTools is a powerful debugging tool built into the Google Chrome browser. Many other browsers also use this debugging tool. It can dynamically add/delete styles and display them in real time.

Forcing State Display#

You can display elements that are displayed under specific states (such as hover, active, etc.)

You can also force element states/add pseudo-classes, etc. through the style bar on the right side

You can also filter styles

Screenshots#

Yes, you can take screenshots of nodes, which is amazing (not kidding)

console#

console.log in JavaScript will be recorded here, no need to explain more, I believe everyone has used it~

However, one thing worth mentioning is that you can also output styled text for easy positioning during debugging, such as:

console.log('%s %o,%c%s', 'hello', {name:'I am name', age: 18}, 'font-size:20px; color:red; ', 'Welcome to bytedance!');

Here, %s outputs a string, %o outputs an object, and %c outputs styles (those who have used c/c++ formatted output should know, but here %c is for styles)

console.table can visualize an array of objects, which is very convenient

const persons = [{id:1, name:'张三', age: 18, des: '好耶'},{id:2, name:'李四', age: 24, des: '我是李四'}, {id:3, name:'王五', age: 20, des: '这是什么'}];

Tree structure dir

Soure Tab#

As the name suggests, it displays the content in the source code, and you can add breakpoints and debug step by step.

Executing debugger on a certain line in the code or setting a breakpoint will pause the execution when it reaches that line, and then you can continue to debug step by step. There is no need to explain more about the subsequent debugging, just try it out. (If you are used to debugging in the backend, this is easy to get used to, it is equivalent to setting a breakpoint)

Other features include setting breakpoints when requests occur: XHR/fetch breakpoints, adding breakpoints to element structures (deleting, etc.), scope can view the scope list (including closures), CallStack can view the call stack of the current JavaScript code, etc.

How to Debug Compressed Code? SoureMap#

Front-end code naturally has the "open source" attribute. For security reasons, JavaScript code is usually compressed by tools such as webpack. The compressed code usually has only one line, and variables are replaced with a, b, etc., making it unreadable. So how to debug compressed code?

When webpack is packaged, it can generate a Source Map program, which maps the compressed code to the real file (mapping). When an exception is thrown, it can be mapped back. The Source Map is usually deleted after going online.

Perfomance#

Performance panel, can generate reports, including

NetWork#

View the network request panel, view request headers/responses, etc.

Application#

This panel displays information related to local storage

Local Storage
Session Storage
IndexedDB
Web SQL
Cookie

Tip: Clicking on Clear Site Data in the Storage panel under this panel can clear the local storage data of the webpage without opening the browser settings.

Mobile H5 Debugging#

Real Device Debugging#

iOS#

Connect the iPhone to the Mac using a Lightning cable
Enable Web Inspector on the iPhone (Settings -> Safari -> Advanced -> Enable Web Inspector)
Open the page to be debugged on the iPhone using Safari browser
Open Safari browser debugging on the Mac (Menu bar -> Develop -> iPhone device name -> Select the page to be debugged)
Debug in the Safari Developer Tools that pops up

If you don't have an iPhone device, you can install Xcode from the Mac AppStore and use its built-in iOS simulator.

Android#

Connect the phone to the computer using a USB cable
Enable developer mode on the phone. Check USB debugging and allow debugging
Open Chrome browser on the computer, enter chrome://inspect/#devices in the address bar, and check the Discover USB devices option
Allow remote debugging on the phone and access the debug page
Click the inspect button on the computer
Enter the debugging interface

This method is generally not recommended. It is better to directly use the phone to scan the QR code for better experience.

Proxy Debugging#

Previously, Fiddler was used on the phone to modify the proxy and capture packets. Now, proxy tools can also be used to debug front-end pages on the phone. The principle is as follows:

The computer acts as a proxy server
The phone connects to the computer through an HTTP proxy
All requests on the phone go through the proxy server

The example used by the teacher in the class is Charles. I will use the example of capturing packets on the phone as an example. It has been tested and works well. You can see the detailed steps in this blog post. You need to install a certificate to capture HTTPS requests 【fiddler】用 fiddler 实现 android 手机抓包_michaelwoshi 的博客 - CSDN 博客_fiddler 手机抓包

After modifying the proxy, you can access the development environment page on the phone! Other commonly used tools are as follows:

Common Development and Debugging Techniques#

Real-time Modification Override for Online#

Open the Overrides under the Sources panel
Click Select folders for Overrides. Select an empty local folder directory.
Allow authorization
Modify the code in the page and save it after the modification is completed
Open devTools, click the three dots in the upper right corner -> More tools -> Changes, and you can see all the modifications

The records are very intuitive, and they will not disappear after refreshing. You can also see which parts have been modified.

Solving Cross-Origin Issues in Development Stage Using Proxies#

Browsers have a same-origin policy, and requests from different origins will result in cross-origin issues, that is, if the protocol, IP, and port number are different, cross-origin issues will occur.

Enable Local Source Map#

When there is no Source Map online, you can use the Map Local network mapping function to access the local Source Map file.

Rubber Duck Debugging!#

It is said that master programmers carry a rubber duck with them, and when debugging code, they put the rubber duck on the table, explain each line of code to the duck in detail, and quickly locate and fix the problem.

"The Pragmatic Programmer"

So it came from this, hahaha. This is a good method for organizing your own problem logic.

Summary and Thoughts#

Debugging in front-end development is also a very important part. This lesson explains in detail the use of Google Chrome developer tools on PC and debugging on mobile devices, which is very beneficial.

Most of the content quoted in this article comes from the class of the bald cloak hero teacher (?), MDN, and an external blog, 【fiddler】用 fiddler 实现 android 手机抓包_michaelwoshi 的博客 - CSDN 博客_fiddler 手机抓包