définition
Débogage : le code s'exécute sur une certaine plate-forme, expose l'état d'exécution d'une certaine manière et le transmet à l'outil de développement pour l'affichage et l'interaction de l'interface utilisateur, aidant les développeurs à résoudre les problèmes, à trier le processus et à comprendre l'état d'exécution du code, etc. Il s'agit de débogage.
Le débogage consiste à transmettre des informations d'exécution aux outils de développement via un certain canal (tel que WebSocket), à afficher et à interagir avec l'interface utilisateur, à aider les développeurs à résoudre les problèmes et à comprendre l'état d'exécution du code, etc.
outil de débogage
(Outils de débogage de pages web, Node.js, code React/Vue)
1. Ce qu'ils ont en commun
Les principes de Chrome DevTools, VSCode Debugger et Vue/React DevTools ont quelque chose en commun : la partie backend est responsable de l'obtention des informations d'exécution, la partie frontend est responsable du rendu et de l'interaction, et il existe également un protocole de débogage utilisé pour spécifier différents formats de données et différents canaux, tels que WebSocket et le transfert en arrière-plan des plug-ins Chrome.
2. Différences
VSCode Debugger dispose d'une couche supplémentaire d'adaptateur de débogage pour la réutilisation dans plusieurs langues.Vue/React DevTools injecte du code backend dans la page, puis réalise une communication bidirectionnelle via l'arrière-plan.
3. Quatre éléments
Frontend, backend, protocole de débogage, canal, tels sont les quatre éléments des outils de débogage.
Débogage JS des pages Web
Réagissez comme un exemple
1、 Outils de développement Chrome
fonctionner:
Inspection par clic droit -> cliquez sur le panneau du code source (sources) -> appuyez sur un point d'arrêt -> actualisez pour déboguer
2、Débogueur VSCode
fonctionner:
(1)
a. VSCode ouvre le répertoire du projet et crée le fichier .vscode/launch.json :
Cliquez sur le bouton Ajouter une configuration... dans le coin inférieur droit et sélectionnez Chrome : Lancer :
b. Cliquez directement sur créer un fichier launch.json dans la fenêtre de débogage pour créer rapidement :
(2) Remplacez l'URL consultée par l'adresse démarrée par le serveur de développement :
⚠️注意：userDataDir 默认为 true 的时候，React DevTools 插件是没有的，需要再安装，所以最好手动设置为false
(3) 然后进入 Debug 窗口，点击启动：
此时启动了浏览器，并打开了这个 url
(4)
在代码打个断点，然后点击刷新：
