◆ LocalOverrides と #RRGGBBAA

64 のときは使っていて気づいた部分があったのでちょっとまってから書いてみましたが あまり目に見える変更点はなさそうです

拡張機能一覧画面

徐々に設定画面が新しいデザインになっていっていましたが 65 では拡張機能の画面も新しくなりました
全体的に設定画面は昔のほうが好きだったのでとうとう変わってしまったかという気持ちです

ch65-extensions

シークレットモードでも動かすかを切り替えたり バックグラウンドページを devtools で開いたりするには「詳細」を押してその拡張機能の詳細画面を一度開かないといけません

Local Overrides

devtools での変更はいろいろありますが 一番大きな追加機能は LocalOverrides です
64 のときにちょっと触れたものです

ローカルのフォルダを設定しておけば devtools での CSS や JavaScript の変更があると変更されたファイルがローカルフォルダに保存されます
devtools を開いていれば変更済みファイルが使用されるので ページをリロードしてもその変更が維持されたままです
リロードして確認したいときにはすごく便利です

ただ 常に変更された状態が表示されているので 自分で作ってるページを修正する場合に devtools 上だけ修正して ソースの方への修正が忘れそうになることもあるので注意が必要です

ローカルフォルダの設定は Sources タブの左側のツリー表示の箇所で「Network」 や 「FileSystem」 タブと同列に 「Overrides」 が追加されているので ここからローカルフォルダを設定します

ch65-lo

考え方によっては拡張機能にあるようなカスタム CSS やユーザスクリプトとしても使えます
JavaScript の場合はユーザスクリプトだと外からの変更になるので出来ることに限界がありますが この機能ではソースコード自体を改変できるのでユーザスクリプトでは難しいカスタマイズも行えます

一応 ユーザスクリプトでも元の JavaScript ファイルを改変したものをロードさせて本来ロードするものをブロックすれば同等のことが出来なくはないですけどそれなりに面倒なので この機能のほうが遥かに楽です
拡張機能のインストールも不要ですし

ただしこの機能が有効なのは devtools が有効なときのみです
なので常時 devtools 出してるような人でないならこの用途には向かないです

ところであとから devtools を開いた場合は CSS ならそのタイミングでスタイルが変更されます
JavaScript の場合に実行済みの部分が再実行されることはありません
リスナの内部など devtools を開いた後に実行される部分が変更されていれば そこが変更された処理になります

例えば

console.log(1)
window.onclick = function(eve){
console.log(2)
}

このコードを

console.log(10)
window.onclick = function(eve){
console.log(20)
}

に変更します
devtools なしでページを開くと 1 が表示されてクリックすると 2 が表示されます
その後 devtools を開くと クリックしたときの表示が 20 に変わります

逆に閉じた場合は そのまま維持されます
変更していない状態にしたい場合は devtools を閉じてからリロードする必要があります

その他 devtools

他には setTimeout などの非同期処理や worker へのメッセージ送信でもちゃんとステップ実行ができるようになったり 文字色のカラーピッカーでコントラスト的に見やすいかをサポートしてくれたりするようになりました

ch65-cp

あまり気にしない部分ですがいつか役立つかもしれません

Web 開発者向けの変更

devtools とは違って JavaScript や CSS などの変更点です

個人的に嬉しい変更はやっと透過度含めた 16 進数表記が出来る部分です

background-color: #ff880055;
color: #abcd;

こういう書き方ができます
透過度は RGB のあとに書いて 0 に近いほど透明になって ff に近いほど不透明になります
これまでだと rgba(200, 100, 30, 0.5) のように 10 進数化して rgba 関数を書く必要があったのですが 他の色と同じで 16 進数で書けるようになるのですごく助かります

ところで CSS では rgba, rrggbbaa 形式になるのですが XAML では argb, aarrggbb となっていて 透過度の位置が反対です
両方使う人は注意が必要です
同じ色をコピペでそのまま使えないですし


他は興味持ったものだと

  • document.all が書き換え不可能になった
  • クロスオリジンの a タグの download 属性がブロックされるようになった
  • display: content に対応した
  • CSS Paint API に対応した
  • Symantec の証明書を信頼しなくなった

といったところです

書き換えようと思ったことがないですが document.all って書き換えられたのですね
get オンリーなプロパティかと思っていました

クロスオリジン属性のある a タグの download 属性が無視されるようです
いまいちよくわからなかったのですが href の先がクロスオリジンであるか じゃなくて crossorigin という属性を見るということなのでしょうか
ダウンロードしたいファイルが別オリジンにあることってよくあることだと思います
ブログなどの無料サービス枠で作ってるとリソースは別サーバということも少なからずありますし 画像は別サーバというのはよく見るものです
それがブロックされるとなれば困る人は多いと思いますし メリットも感じられません
クロスオリジンブロックは基本セキュリティだと思いますが 別オリジンをダウンロードできたところでそのページ作成者がウィルスなどをダウンロードさせようとしているなら自分のオリジンに持ってくればいいだけですしクロスオリジンをブロックする必要性がわかりません

CSS Paint API は CSS の動きを JavaScript で定義できるものみたいです
1, 2年くらい前にそんなことをできるようにする houdini とかいうプロジェクトがあるとか聞いた覚えがありますがこれのことでしょうか
これに対応すれば JavaScript で CSS の polyfill が作れるようになるそうですし 自分で独自の動きを定義できたりして便利かもしれません

参考とか

https://developers.google.com/web/updates/2018/01/devtools
https://developers.google.com/web/updates/2018/02/chrome-65-deprecations
https://developers.google.com/web/updates/2018/03/nic65

このあたりに英語ですが 新機能の説明が詳しく載ってます
この記事だと興味ない部分はスキップしてるのでもっと詳しく知りたいなら参考になります

https://www.chromestatus.com/features#milestone%3D65
単純に Chrome のバージョンごとの変更点をみたいならこっちです