トップ・ページの表示 注意書きの表示 掲示板に書き込む前に必ず この ”注意書き”を お読み下さい.

"沙羅"

★この掲示板は書き込みを停止いたしました 。
記事の書き込みはリンク・ページの表示 http://ashtarte.hotcom-web.com/utf8/smt.cgi?r+rpr/ を ご利用 下さい。

   
   

ページの表示順:{ 新しい順/ 古い順}.
初期・ページの表示・位置:{ 先頭ページ/ 末尾ページ}.
1ページ内のスレッド表示数:







<Number>: [0000061D]  <Date>: 2022/04/21 21:33:46
<Title>: Visual Studio Codeフロントエンド開発環境/「ビルトインJavaScriptデバッガー+DevTools」使用法
<Name>: amanojaku@管理人

「JavaScriptデバッガー」が内蔵されたらしいと言う事で、「JavaScriptデバッガー+DevTools」使用法を解説する(Visual Studio Codeはインストール済みとする)。

「Microsoft Edge Tools for VS Code、Debugger for Chrome」プラグインの導入は必須。

【JavaScriptデバッガー+DevTools+設定】

まず (1番目の画像)対象となるHTMLファイルのタブを必ず選択する、そのHTMLファイルが表示されているだけではダメで、そのタブにフォーカスが移動している必要が有る(そのページ自体はブラウザで表示しておく必要は無い)。
(2番目の画像の一番 左側の赤く囲われた所)アクティビティバーのデバッグ・アイコンをクリック。
(2番目の画像)左側に[実行とデバッグ]ボタンや「launch.json ファイルを作成します」リンクが表示される、又は(3番目の画像の左上側の赤く囲われた所)左上に[構成がありません]と表示された場合は、それをクリック→[構成の追加]をクリック。
何も設定したく無い場合は(2番目の画像)[実行とデバッグ]ボタンをクリック。
何か設定したいなら(2番目の画像)「launch.json ファイルを作成します」リンクをクリック。

(4番目の画像の上側の赤く囲われた所)コマンド・パレットで[Edge:Launch]をクリック。
launch.jsonが自動生成され、表示される、"name"は分かりやすい名前に変更しても良い。
ローカル・サーバーで実行したい場合は、fileにローカル・サーバーのURLをコピペすればOK、その場合は必ずローカル・サーバーは起動しておく。

(5番目の画像の一番 左上側の赤く囲われた2ヵ所)左側の[デバッグ構成]の表示が無い場合は、(2番目の画像の一番 左側の赤く囲われた所)アクティビティバーのデバッグ・アイコンをクリック。
(5番目の画像の一番 左上側の赤く囲われた2ヵ所)左側の[デバッグ構成]の表示がlaunch.jsonの"name"で設定されている名前になっている
(5番目の画像の一番 左上側の赤く囲われた2ヵ所)右側の三角アイコンをクリック。
なぜかエラーが表示される場合があるが、エラーが表示されたら再度 右側の三角アイコンをクリック。
別ウインドウでブラウザが起動する。

(5番目の画像の右上側の赤く囲われた2ヵ所)デバッグ用パネルの左側の赤く囲われた所をドラッグすると左右に移動できる(上下は1行分しか移動できない)、右側の赤く囲われた所をクリックするとDevToolsが起動する。


【無設定(ローカル)でDevToolsを起動】※この場合は確実性が無いと言う問題がある(バグか?)

まず (1番目の画像)対象となるHTMLファイルのタブを必ず選択する、そのHTMLファイルが表示されているだけではダメで、そのタブにフォーカスが移動している必要が有る(そのページ自体はブラウザで表示しておく必要は無い)。
[F5]キーを押す。
(2番目の画像)左側に[実行とデバッグ]ボタンや「launch.json ファイルを作成します」リンクが表示される場合がある、それが表示された場合、暫く待つと一瞬 別ウインドウでブラウザが起動し、すぐにブラウザが閉じてから、「Could not attach to main target」エラーが表示されるのでキャンセルする。
もしも (4番目の画像)コマンド・パレットが開いたら、[ESC]キーでコマンド・パレットを閉じる。
念のために 再度 (1番目の画像)対象となるHTMLファイルのタブを選択する。
再度 [F5]キーを押す。
もし それでもブラウザが起動しないらな諦めたほうが良いかもしれない。

ブラウザが起動し そのページが表示されたらDevToolsを起動してやる。
(5番目の画像の右上側の赤く囲われた2ヵ所)右側の赤く囲われた所をクリックするとDevToolsが起動する、デバッグ用パネルの左側の赤く囲われた所をドラッグすると左右に移動できる(上下は1行分しか移動できない)。
DevToolsの表示が重い場合が有るので、正常に表示できない場合は暫く待ってみる。

Block( Address 00000628 Identity 0000061D )






ページの表示順:{ 新しい順/ 古い順}.
初期・ページの表示・位置:{ 先頭ページ/ 末尾ページ}.
1ページ内のスレッド表示数:

   
   

管理者用 Password:

  




SMT Version 8.022(+A) Release M6.
Author : amanojaku.