ホームページ > 開発ツール > VSCode > vscodeでjsコードをデバッグする方法

vscodeでjsコードをデバッグする方法

王林
リリース: 2019-12-14 15:35:54
オリジナル
3831 人が閲覧しました

vscodeでjsコードをデバッグする方法

左側の拡張機能で「Debugger for Chrome」を検索し、クリックしてインストールします。

vscodeでjsコードをデバッグする方法

HTML プロジェクト ディレクトリの下で [f5] をクリックし、または、左側のデバッグ ボタン

vscodeでjsコードをデバッグする方法

## を選択し、ドロップダウン ボタンを選択します。追加があります。Chrome

を選択すると表示されます。

vscodeでjsコードをデバッグする方法

laungh.json の設定ファイルは独自のプロジェクト ディレクトリの下にあります

vscodeでjsコードをデバッグする方法

#ただし、別のコード ファイルをデバッグしたい場合は、次のものが必要です。毎回構成ファイルを変更するには

#

{
    "version": "0.2.0",
    "configurations": [{
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceRoot}"
        },
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceRoot}"
        },
        {
            "name": "Launch index.html (disable sourcemaps)",
            "type": "chrome",
            "request": "launch",
            "sourceMaps": false,
            "file": "${workspaceRoot}/jsTest/test1/test1.html"  #每次需要修改这里的文件地址
        }
    ]
}
ログイン後にコピー

ここでデバッグできます。

vscodeでjsコードをデバッグする方法## で [Launchindex.html (disablesourcemaps)] デバッグ項目を選択し、f5 キーを押してください。デバッグすると、それが表示され、同時に Google ブラウジングが開きます。 デバッグ段階に入るには、

vscodeでjsコードをデバッグする方法 をクリックします。

おすすめの関連記事とチュートリアル:

vscode チュートリアル

以上がvscodeでjsコードをデバッグする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート