definition
Debugging: The code runs on a certain platform, exposes the runtime state in a certain way, and passes it to the development tool for UI display and interaction, assisting developers in troubleshooting problems, sorting out the process, and understanding the running status of the code, etc. This is debugging.
Debugging is to pass runtime information to development tools through a certain channel (such as WebSocket), to display and interact with UI, to assist developers to troubleshoot problems and understand the running status of code, etc.
debugging tool
(Tools for debugging web pages, Node.js, React/Vue code)
1. What they have in common
The principles of Chrome DevTools, VSCode Debugger, and Vue/React DevTools have something in common: the backend part is responsible for obtaining runtime information, the frontend part is responsible for rendering and interaction, and there is also a debugging protocol used to specify different data formats and different channels, such as WebSocket, background forwarding of Chrome plug-ins, etc.
2. Differences
VSCode Debugger has an additional layer of Debugger Adapter for cross-language reuse. Vue/React DevTools injects backend code into the page, and then realizes two-way communication through Background.
3. Four elements
Frontend, backend, debugging protocol, channel, these are the four elements of debugging tools.
JS debugging of web pages
React as an example
1、 Chrome DevTools
operate:
Right-click inspection -> click the source code (sources) panel -> hit a breakpoint -> refresh to debug
2、VSCode Debugger
operate:
(1)
a. VSCode opens the project directory and creates the .vscode/launch.json file:
Click the Add Configuration... button in the lower right corner and select Chrome: Launch:
b. Directly click create a launch.json file in the Debug window to quickly create:
(2) Change the accessed url to the address started by the development server:
⚠️注意：userDataDir 默认为 true 的时候，React DevTools 插件是没有的，需要再安装，所以最好手动设置为false
(3) 然后进入 Debug 窗口，点击启动：
此时启动了浏览器，并打开了这个 url
(4)
在代码打个断点，然后点击刷新：
