Une brève discussion sur plusieurs méthodes de débogage du code js dans VSCode

Comment déboguer le code js dans VSCode ? L'article suivant vous présentera plusieurs méthodes de débogage du code js dans VSCode. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Recommandations associées : "Tutoriel vscode"

Présentation de deux méthodes de débogage de js dans VS Code :

• Plug-in Quokka.js

• Débogueur pour Chrome avec Live Server

Plug-in Quokka.js

Adresse du plug-in : https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

Dans le magasin d'extensions Recherchez et installez :

Utilisez la touche de raccourci ctrl+shift+P dans le code VS pour afficher le panneau, saisissez quo :

Vous pouvez voir qu'il existe deux options, l'une consiste à déboguer js et l'autre à déboguer ts. Nous choisissons le premier.

Il se peut qu'un message vous demande si vous souhaitez acheter la version professionnelle. Vous pouvez la désactiver et l'ignorer, ou vous pouvez choisir de l'acheter.

Essayez de saisir quelques lignes de code dans la zone d'édition ouverte :

Vous constaterez que le code s'exécute en temps réel. Le carré vert à gauche indique que l'instruction a été exécutée avec succès. Si l'exécution a échoué, elle deviendra rouge.

Le débogueur pour Chrome fonctionne avec Live Server

Adresse du plug-in du débogueur pour Chrome : https : // Marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

Adresse du plug-in Live Server : https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Veuillez d'abord télécharger et installer ces deux plug-ins ; cette méthode nécessite l'installation de Google Chrome.

Supposons que vous ayez un tel projet front-end :

Après avoir installé Live Server, vous trouverez VS Code Il y a un Go Live petit bouton dans le coin inférieur droit :

Cliquez dessus !

Live Server créera un serveur de développement local et affichera une fenêtre de navigateur avec une adresse similaire à celle-ci :

http://127.0.0.1:5500/

Il y aura également une invite :

Vous pouvez fermer temporairement cette fenêtre de navigateur, ne vous inquiétez pas, jusqu'à ce que vous cliquiez à nouveau sur le petit bouton dans le coin inférieur droit ou que vous fermiez VS Code, vous pouvez toujours ouvrir la page Web tout de suite via http://127.0.0.1:5500/.

Veuillez retenir ce numéro de port : 5500, car il sera utilisé plus tard. Lorsque vous ouvrez Live Server ou d'autres programmes qui occupent ce numéro de port, le numéro de port sera automatiquement +1.

Comme son nom l'indique, Live Server est mis à jour en temps réel. Lorsque vous modifiez les fichiers ou le code du projet, Live Server se mettra à jour immédiatement et actualisera automatiquement la page.

Retour à l'éditeur.

Cliquez tour à tour : Exécuter l'icône-> Créer le fichier launch.json :

Écrasez la configuration d'origine par la configuration suivante et enregistrez :

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "chrome 调试",
            "url": "http://localhost:5500",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

VS Code enregistrera la configuration pertinente dans le répertoire où se trouve le projet :

Remarque : Le numéro de port dans le "url" champ5500 Il doit correspondre au numéro de port fourni par Live Server.

Cliquez :

Vous verrez :

Comme vous le souhaitez, il a Ça marche normalement.

Nous déplaçons la souris vers la position de l'icône et cliquons pour définir un point d'arrêt :

Cliquez ensuite sur le bouton de la page Web :

你会看到打上的断点成功拦截执行：

细心的你可能会发现，当点击一次 Go Live 按钮时会打开一个浏览器窗口，再点击一次调试按钮时（快捷键 F5），会打开第二个用于调试的窗口。这可能是没有必要的，我们只需要一个窗口就行了。

下面我们来编辑配置，使这个过程只需打开一次浏览器窗口。

点击 “chrome 调试” 旁边的齿轮：

在打开的编辑框依次点击：

得到如下配置并保存：

在扩展商店搜索 Live Server 并打开它的扩展设置：

需要修改的配置有两个：

1、Chrome Debugging Attachment

点击进入，将 "liveServer.settings.ChromeDebuggingAttachment": false 改为 true。

"liveServer.settings.ChromeDebuggingAttachment": true

2、Custom Browser

点击此选项中的下拉框，我们选择 chrome：

修改完成！

接下来我们重启 Live Srever 服务：

回到 VS Code，按下 F5 键，启动调试：

之后本项目的每次调试你只需要点击 Go Live 按钮并回到 VS Code 按下 F5 键就行了。

当然，chrome 调试 选项可能还是生效的，当你关掉 Live Server 打开的浏览器窗口时，可以尝试使用这个选项再次打开。

如果遇到端口号被占用的情况，可以点击调试旁边的齿轮来修改。

祝：

永无 BUG！

使用到的代码：

<!-- ./index.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="time">请点击下方按钮以获取当前时间</div>
    <button id="getTime">获取时间</button>
    <script src="./js/index.js"></script>
</body>
</html>

// ./js/index.js
let getTimeBtn = document.getElementById("getTime");
getTimeBtn.onclick = function (e) {
    let time = document.getElementById("time");
    let now = new Date().toLocaleString();
    time.innerHTML = now;
}

// ./.vscode/launch.json
{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach to Chrome",
            "port": 9222,
            "request": "attach",
            "type": "pwa-chrome",
            "webRoot": "${workspaceFolder}"
        },
        {
            "type": "chrome",
            "request": "launch",
            "name": "chrome 调试",
            "url": "http://localhost:5500",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

更多编程相关知识，请访问：编程课程！！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!