変奏現実

パソコンやMMORPGのことなどを思いつくまま・・・記載されている会社名・製品名・システム名などは、各社の商標、または登録商標です。

この画面は、簡易表示です

2025年5月6日

[spreadSheet7]デバッグ

投稿日 2025年5月6日 10:59 by おっとっとっと Comment

ES-moduleにしたせいで、サーバに上げないと使えなくなってる。

index.htmlを開いて「Open with live server」でchromeでspreadSheet7を開き

chromeのDevToolでチマチマするのも面倒なので

VScodeの「chrome アタッチ」はchromeにデバッグオプションを付けないのでアタッチに失敗するので改造。urlはliveServerに合わせる。

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "http://127.0.0.1:5500",
            "webRoot": "${workspaceFolder}",
            "runtimeArgs": [
                "--remote-debugging-port=9222"
            ]
        }
    ]
}

これで無事live serverで表示しながらVScodeのデバッガが使えるようになる。

問題点は、やはりspreadSheet7がローカルで動かないことかな



[VScode]勝手に別のファイルをデバッグしたがる

投稿日 2025年5月6日 10:09 by おっとっとっと Comment

簡単なソースならソースコードをエディタで開いだ状態で「実行」⇒「デバッグの開始」でデバッグしてくれるが、マレに違うソースをデバッグしだすことがある。

.vscodeフォルダが無いので見えないトコで記憶しているらしくVScodeを再起動してもそのまんま。

※setting.jsonに

デバッガのlaunch.jsonに「実行」⇒「構成の追加」で「その他のNode.js…」⇒「現在のファイルの実行」デバッグするファイルを個別に登録し”name”を書き換えるのも面倒すぎ

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "name": "現在のファイルの実行", 👈複数作ったら、書き換えないと訳が分からなくなる
            "request": "launch",
            "program": "・・・\\index.js"
        }
    ]
}

configurationsにハイライト部分を追記して、デバッガのプルダウンに”表示中のファイルを起動”が出る様にした。時々ブラウザで確認したい時もあるけどね。

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "表示中のJSファイルを起動",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}\\${relativeFile}"
        }
    ]
}

開発環境のプロジェクト設定にはC言語のようなコンパイラ（EXE作る君）向けだと、デバッグの設定が１つしかないか、デバッグを切替える為にサブ・プロジェクトに分ける必要があったりする。

スクリプト系は、ブラウザ上のjavascript、サーバーサイドのphp、保守コマンドの.shとか色々混ざる時もあるので、デバッガの設定を切り替えられる様にできるのはとても助かる。




top