DevTools

Edgeで取り上げるようなものはDevToolsしかない。
これを例として画像を出す場合、Edge全体をキャプチャーするのは半分以上が無関係なもので無駄が多くなる。画像サイズも大きくなって扱いが面倒になる。
そこで、Edgeの中のDevToolsに関係した部分だけを取り出すことにした(Fig.1)

Fig.1

しかし、この位置は変更できるようである。
DevToolsの画面の右上にある「…」をクリックすると次のようなメニューが出る。
ここで「Dock side」として「Undock into separate window」にすると、これを別ウインドウに独立して表示させることができる。
これは便利である。ソースエディターのエリアの狭さの問題点はかなり解消される。以後(2021/06/29)はこのパターンで使うことにする。
別ウインドウにすると一体型の場合に右端にあった「×」ボタンはなくなる。閉じる場合は別ウインドウの「×」を使えばよいからである。
下記は別ウインドウにした場合のものである。


分離実行例
ソースエディタを別ウインドウにしたほうがはるかに使いやすい。ソースエディタ内で[Ctrl]+[S]で上書き保存ができるなども同じ。



問題点またはバグ

DevToolsではExcel/VBAなどのように先頭から順に文字を入力すると、単語ヒントのようなものが出てくる。該当するものがあればそれを選択し、[Tab]キーを押せばそれがソースエディタのカーソル位置に入力される。

Fig.2

上の例(Fig.2)はスタイルとして「fbn」を入力しようとしているところである。しかし「fb」まで入力しても「fbn」は候補に出てこない。
このスタイルはpcsm.cssから抽出しているようであるが、そこには確かに「fbn」スタイルは存在している。
たかがHTMLエディタとはいえ、高機能を「売り」にしたいのだろうが、「水漏れ」があったら、それこそ「水の泡」である。結局は使い物にならない。

これは何をするもの

「ページ」タブと「ファイルシステム」タブの右端にある「…」をクリックすると「ファイルを開く Ctrl+P」というメニューが出てくる。どちらのタブで実行しても同じものが出てくる。

Fig.3

これを実行するとこのエリアに関係あるファイル(リンクしているファイルを含む)のリストが出てくる。それをソースエディタの部分に呼びたすということのようである。*.html, *.css, *.js はそのテキストが表示される。画像ファイルをオープンするとソースエディタの部分にその画像が表示される。

- 2021/06/28 -





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