世界は広い！

主にアウトプットを行っております。お召し上がりの際は冷めないうちに。

【簡単】vscodeでJavaJcriptのデバッグ環境を設定する

最近vscodeの設定を改めたので備忘録として載せます

 

概要

①vscodeに必要な機能をインストールする

  • Debug for Chrome
  • Live Server

 

②vscodeのデバック設定を1点変更

③Live Serverの設定を1点変更（お好み）

④デバッグするjsファイルを作成

 

内容

①

f:id:kkrsky:20200704155601p:plain

vscode debag for chrome
  • Live Server

f:id:kkrsky:20200704155713p:plain

vscode Live Server

をインストール

 

②vscodeのデバック設定を変更

2-1 ルートディレクトリに.vscode/launch.jsonを作成

f:id:kkrsky:20200704155854p:plain

*1

 

ここのurlにLive Serverで立ち上げたurlを記入する

 

立ち上げたurlを確認するにはvscode右下にあるGo Liveを押すとLiveServerが起動するので、立ち上がったurlをメモします

f:id:kkrsky:20200704160309p:plain

 

 

③Live Serverの設定（お好み）

Live Serverを立ち上げるたびにブラウザを立ち上げてしまう設定を解除します。

 

vscode左下にある設定を押し、

f:id:kkrsky:20200704160441p:plain

live server no browser

で検索しまます。そこに出てきた設定にチェックを入れます。

f:id:kkrsky:20200704160617p:plain

 

④最後に、ルートディレクトリにindex.htmlを作成します。

f:id:kkrsky:20200704161049p:plain

index.html

*2

headタグ内にコードをsprictタグで読み込みます

 

あとは、Go Liveを押してサーバーが起動していることを確認した後にF5を押してデバッグモードを起動させるとconsole.logの内容がvscodeに表示されます

f:id:kkrsky:20200704161449p:plain

 

 おまけ

favicon.icoがありません。というエラーが出た場合

favicon.icoをルートディレクトリ上に配置すれば解決します。

 

参考

https://stackoverflow.com/questions/39149846/why-am-i-seeing-a-404-not-found-error-failed-to-load-favicon-ico-when-not-usin/43042288

 

簡単favicon作成サイト

https://favicon-generator.mintsu-dev.com/

 

以上

快適なデバッグライフを！

 

 

*1:

{
  "version": "0.1.0",
  "configurations": [
    // Webサーバー上にあるファイルをデバッグ
    {
      // デバッグ設定の名称
      "name": "Launch server",
      "type": "chrome",
      "request": "launch",
      // デバッグ対象のURLを指定
      "url": "http://127.0.0.1:5500/index.html",
      // マッピングするローカルファイルが存在するディレクトリを指定
      "webRoot": "${workspaceRoot}/",
      "sourceMaps": true
    }
  ]
}

*2:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      console.log("this is index.html");
    </script>
    <script src="B043/code.js"></script>
  </head>
  <body>
    <p>top pages </p>
  </body>
</html>