Visual Studio codeでブレークポイントが設定できない

Question

visual studio　codeを使用してデバッグを行いたいと思っていますが、ブレークポイントが設定できません。
すごく単純なミスのような気がしますが、何がいけないのでしょうか？ご教授お願いします。
launch.jsonの設定は以下の通りです。
index.htmlに対してブレークポイントがつけられない状況です。
デバッガはDebugger for Chromeを使用しています。
よろしくお願いします。

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {

            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceFolder}"
        },
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "http://localhost:8080/jocl/",
            "webRoot": "${workspaceFolder}/index.html"
        }


    ]
}

Answer 1

File -> preferences -> settings で
Glyph Margin を検索してチェック。
または、settings.jsonに

"editor.glyphMargin": true

を追加してみてください。

Answer 2

だいぶ前の質問ですが、受付中だったので一応回答しますね！
htmlにはブレークポイントをそもそも設定できません。
その画面を動かしている裏方のファイルにブレークポイントを打ってみましょう！
.javaとか.phpのファイルですね
htmlはただ画面に出すだけなので、実際に処理をして画面に値を渡している部分にブレークポイントを打つと見たい情報が見れるんじゃないかと思います

Answer 3

行番号にカーソルを合わせると、左側に薄い赤丸が表示されませんか。

薄い赤丸をクリックすると、濃い赤丸にかわります。
、
後は、デバッグーデバッグの開始でブレークポイントまで
進むと思います。

もっと高度なお話でしたら、すみません。

Comments

[qtn.01]

回答ありがとうございます。
通常ですと、赤い丸が出ますがなぜか出ない状況です。
それが、なぜなのかわからないところです。