Microsoft EdgeDevTools

ローカルにある「D:\Homepage2\edit\pcsm\main\ps_news.html」を表示して[F12]を押したところ。
「D:\Homepage2\edit\pcsm」フォルダはワークスペースに指定している。これを指定していないとファイルの編集はできない。

1
このフォルダ内には他のファイルやフォルダもあるのだが、今ブラウザ画面で表示しているページに関係のある部分が「ページ」タブに出てくる。
アイコンの右下に緑色の小さい「」がついているファイルが、今画面で表示されているページと関連のあるファイル(*.css, *.js, 画像など)である



2
ここで、「ページ」タブに出ている「ps_news.html」をクリックすると、右端のペイン(エリア)のこのファイルのソースが表示される。
以後、このソースが出ているエリアを「ソースエディタ」と呼ぶことにする。
この状態でソースを修正したり追加したりすることができるが、念のため「ファイルシステム」タブをクリックしてみる。



3
「ワークスペース」に登録した全フォルダがリストアップして表示される。
その中に今現在左側のエリアで表示されているファイルに関係のある部分が橙色のアイコンで目立つように表示されている。
この状態でソースの修正や変更をしていくこともできる。



4
「ワークスペース」の中から、左側に表示されているものと全く関係のない「ipc_a1.html」をクリックしたところ。
この状態でも「ipc_a1.html」ファイルを編集して保存することができる。


- 2021/06/28 -


メモ
この「開発者ツール」(DevTools)は、単独でも使えるものをEdge内に同居(ドッキングツール)させたようなものである。「開発」とはいっても、その主な機能は昔は誰もがやっていた手動でのソース(*.html)の編集である。個人的にもそれしか興味はない。IEとメモ帳のコンビでやっていたことをするだけである。
このツール、特にソースエディターの問題点として、
  1. 横幅を折り返す機能がない。改行するまで横一行に表示される。
  2. 表示フォントが小さい。これを大きくすることができない。
  3. 文字コードがUTF-8Nに固定され、他の文字コードは使用できない。
  4. ソースエディタ―で表示しているテキスト(ページ)をブラウザ画面に表示させる方法がない。
これらメモ帳にあるような機能がないのが欠点である。別ウインドウに表示できるとはいえ、本来ドッキング・ツールとしての性格上(1)(2)は致し方ないのであろう。





Microsoft Edge DevToolsの使い方(1)
Microsoft Edge DevToolsの使い方(2)
Microsoft Edge DevToolsの使い方(3)
Microsoft Edge DevToolsの使い方(4)
Microsoft Edge DevToolsの使い方(5)
Microsoft Edge DevToolsの使い方(6)