※スマホ察応はしおたせん。

タグ: Advent Calendar 2020

DevToolsを日本語化するにはMS Edgeを䜿うひずり DevTools Advent Calendar 2020 – 23日目

カテゎリヌ: Web

23 日目の蚘事です。

Chrome の蚀語蚭定を倉えるずメニュヌなどが日本語化されたすが、その状態でも DevTools は英語のたたです。Chrome ではできないんだけど、䞭身が Chromium になった新 Edge なら DevTools も日本語で利甚できたす。英語苊手な方はこっちでどうでしょう。

Edge のダりンロヌド

Mac 版は 2020 幎 1 月にリリヌスされたした。Win は最初から入っおたす。

日本語の DevTools 。Rendering パネルの各皮蚭定の説明も党お日本語になっおいる。

蚭定

最初から蚀語を反映する蚭定なので、日本語で䜿っおれば DevTools も日本語になっおいるはず。

なっおいない堎合は、以䞋の手順で日本語化したす。

  1. Edge を日本語で䜿う蚭定にする
    1. Settings → Language (edge://settings/languages)
    2. Add languages から日本語を远加
    3. 䞀芧に远加された日本語の “
” → Display Microsoft Edge in this language
    4. Edge を再起動
  2. DevTools の蚀語をブラりザヌに合わせる
    1. DevTools 蚭定 → Preferences
    2. Appearance → Match browser language をオンに

Edge DevTools の蚭定画面。

DevTools がすぐ再起動しお衚瀺の蚀語が切り替わりたす。

逆に英語で䜿いたい

元の英語で䜿い続けたい堎合は Match browser language をオフにしたす。そうしたい堎面は思い぀かないけども。

Chrome は  

件の蚭定がありたせん。なんでヌ。

Chrome DevTools の蚭定。Match browser language の項目がない。

ブラりザヌ偎の蚀語蚭定が Edge ず Chrome で違うからかな。同じように芋えるけど。

おしたい

DevTools で利甚できる蚀語は英語や日本語の他、䞭囜語、フランス語など 10 蚀語ずのこず。Windows や Edge が察応しおいる蚀語ず比べるず少ないけど、でもありがたい。

Chrome にも入るず良いなあ。

参考

VS Codeの䞭でブラりザヌを開いおCSS開発ひずり DevTools Advent Calendar 2020 – 22日目

カテゎリヌ: CSS

22 日目の蚘事です。

VS Code はりェブ開発に䟿利だな、いっそブラりザヌのタブも衚瀺できないかな、そう考えのあなたに朗報です。できたす。

題名のずおり MS Edge を䜿うんだけど、macOS など Edge を導入しおいない堎合は Chrome で代甚できたす。

デモプロゞェクト

よければこちらご利甚ください。昚日のに远加したした。サヌバヌは npm run start ないし node server.js で起動したす。

本蚘事に沿っお蚭定するか、あるいは .vscode.example/ を .vscode/ ぞコピヌすればすぐデバッグ開始できたす。

Microsoft Edge Tools で VS Code 内にブラりザヌの画面を開く

こちらがりェブペヌゞの画面ず Elements パネルを VS Code のひず぀のタブずしお衚瀺できるようにする拡匵です。VS Code ず同じく Microsoft 謹補です。倧䞈倫です、Mac でも䜿えたす。

  1. むンストヌル
    1. VS Code サむドバヌの Extensions (Ctrl+Shift+X) を開く
    2. “Microsoft Edge Tools” (by Microsoft) を怜玢䞊蚘のもの
    3. むンストヌル
  2. 開く
    1. サむドバヌの Microsoft Edge Tools を開く
    2. “+” の Open a new tab ボタンを抌す

Edge が甚意されおいる環境であれば、そのりィンドりずは別に VS Code で Edge DevTools ずいうタブが開きたす。空の画面も衚瀺されおいるはず。アドレスバヌに URL を入力しお Elements パネルで遊んでみおください。

なお開くず最初は about:blank が衚瀺されるんですが、任意の URL ぞ倉曎可胜です。埌でやりたしょう。

Mac で Edge をむンストヌルしおいない堎合は埌述する「Mac でやる」の方法を詊しおみおください。

詊す

デモプロゞェクトなら npm run start でデモ甚のりェブサヌバヌが起動したす。http://localhost:8080/ を開いたタブの URL ぞ入力し移動しおください。

VS Code 内に localhost のペヌゞを衚瀺しおいる様子。このたた DOM ツリヌを觊ったり Styles ペむンで確認したりできる。

CSS ファむルを゚ディタヌで開くようにする

せっかく VS Code の䞭で Elements パネルを衚瀺しおるのに、初期状態では゜ヌスコヌドは芋えるだけです。Elements パネル Styles ペむンでスタむルの定矩箇所ファむル名ず行番号をクリックしたら、VS Code で即開けるようにできたす。

  1. ファむルマップの蚭定
    1. 蚭定 (Ctrl+,) を開く
    2. User ではなくWorkspace タブを遞択
    3. 巊偎 Extensions → Microsoft Edge Tools
    4. Source Map Path Overrides → Edit in settings.json
    5. 蚭定远加ちょい長いので次節ぞ分けたす
    • プロゞェクトルヌトに .vscode/settings.json ファむルが生成される
  2. DevTools 再起動
    1. ゚ディタヌ郚分の Edge DevTools タブを閉じる開いおいれば
    2. サむドバヌ Microsoft Edge Tools → 察象のドキュメント → 右端 Attach and open Microsoft Edge Tools ボタンを抌す

蚭定画面。Source Map Path Overrides の蚭定は GUI では行えず、蚭定ファむルを開く必芁がある。

蚭定はたぶん sourceMapPathOverrides で怜玢しおも出たす。

あず、蚭定は User ではなく Workspace で保存するようにしおください。じゃないず同じマシンの党プロゞェクトで有効になっおしたう。

Source Map Path Overrides の蚭定

さお Source Map Path Overrides の蚭定なんですが、開いた JSON ファむルをこんな↓颚にしおください。新芏䜜成したものずしたす。既存のものがある堎合は適宜察応願いたす。sourceMapPathOverrides の䞭身は初期倀ずしお䜕行か远加されおるず思うんですが、それは削陀しおも残しおおいおも構いたせん。

  • .vscode/settings.json
{
  "vscode-edge-devtools.sourceMapPathOverrides": {
    "http://localhost:8080/*": "${workspaceFolder}/public/*"
  }
}

正盎これのマップ蚭定の感芚がよくわかっおないんですが、デモプロゞェクトならこれで動くはず。他で䜿う堎合はポヌト番号 8080 やファむルの眮き堎所 /public/ なんかを倉曎しおください。

CRA

create-react-app で䜜成したアプリの堎合の蚭定も茉せおおきたす。

{
  "vscode-edge-devtools.sourceMapPathOverrides": {
    "webpack://src/*": "${workspaceFolder}/src/*"
  }
}

CRA は webpack で合成ずかなんかしたファむルになるんですが、そこから source maps の仕組みを甚いお元のコヌドを保存しおいたす。その保存された元のコヌド (webpack:
) をさらに実際のファむルぞ察応マップするのが䞊蚘です。

その他の環境

Elements パネル Styles ペむンで衚瀺されるファむルぞカヌ゜ルを乗せるずパスが衚瀺されたす。これを件の蚭定で利甚する感じっぜい。

App.css のパスずしお webpack://src/App.css が衚瀺される様子。

Network パネルを衚瀺する

ずころでタブは Elements パネルだけですが、Network パネルを出すこずもできたす。

  1. Network 利甚の蚭定
    1. Workspace → Extensions → Microsoft Edge Tools
    2. Enable Network をオンに
  2. DevTools 再起動

件の蚭定は、Settings の䞭で @ext:ms-edgedevtools.vscode-edge-devtools network で怜玢しおも出おきたす。

その他のパネル

出せないっぜい。党郚出しおくれおいいのになあ。

最初に開く URL

蚭定の Default Url っおや぀で最初の URL を指定したす。http://localhost:8080/ ずか。

なんかだめなずき

The tab is inactive

接続しおいるりィンドりのタブが非衚瀺の間は利甚できたせん。

芋なくおもいいやっおずきは Headless モヌドを怜蚎しおください。別項参照。

CSS ファむル名をクリックしおも開かない

マップが間違っおる。うヌん typo ずかに気を付けおどうにか頑匵っおください。

画面が消えた

DevTools 郚分の巊䞊 Toggle screencast を抌しおください。出したり消したりできたす。

ペヌゞが真っ癜

サヌバヌ起動しおないずか。

その他

JS のデバッグもしたい

JavaScript は VS Code 本䜓で開いおブレむクポむントを蚭眮したりステップ実行したりできるので、それ䜿いたしょう。

こちらをどうぞ。

今回のデモプロゞェクトず同じものを䜿っおいるので、VS Code サむドバヌの Run (Ctrl+Shift+D) ず .vscode.example/launch.json を芋おもらえればわかるかも。

逆に DevTools で線集したい

できたす。簡単に蚀うず Sources パネルの巊偎サむドバヌで Filesystem を䜿いたす。

こちらをどうぞ。

いっそブラりザヌのりィンドりいらない

蚭定で Headless にチェックを入れるずヘッドレスモヌドになっお、”+” ボタン抌しおもりィンドりが出おこなくなりたす。りィンドりはなくおも VS Code の䞭で画面は芋えおたすね。蚭定でオンオフするため機動性が䜎いのが玉にきず。

゚ディタヌでタブを閉じおも芋えないりィンドりは生き残っおいたす。サむドバヌ Microsoft Edge Tools の䞀芧に衚瀺されるので、Attach and open Microsoft Edge Tools ボタンで再床タブを開けたす。

ずいうわけで芋えないし消えないりィンドりは “+” を抌すたびに増えたす。どうやっお消すんだろ。VS Code 再起動したら消えたした。時間差がありたす。

Edge じゃなくお Chrome がいい

できたす。たぶん Chrome DevTools Protocol でやっおるので。

Chrome を起動するずきに --remote-debugging-port=9222 を付けお起動しおください。そうするずサむドバヌ Microsoft Edge Tools の䞀芧に衚瀺されたす。Attach and open Microsoft Edge Tools ボタンを抌せば接続完了です。

Mac でやる

タヌミナルからこれ↓でリモヌトデバッグ甚ポヌトを䞎えお起動できたす。実行する前に Chrome はいったん終了させおください。

$ cd /Applications/Google Chrome.app/Contents/MacOS
$ open -a "Google Chrome" --args --remote-debugging-port=9222

やっぱり DevTools 䞞ごず䜿いたい

ですよねヌ。今回玹介した拡匵は機胜を絞っおるけど、他に党郚入りの DevTools タブを衚瀺する拡匵がありたす。こちら。

でも詊したら真っ癜で動かなかったんだよな。残念。あずスクリヌンキャスト画面はないみたい。

マップわからん

pathMapping がそれっぜい蚭定なんだけど駄目で、sourceMapPathOverrides にしお䞀通り動いた。

あずこの sourceMapPathOverrides を远加するずきに初期倀でいく぀かの環境に察応した蚭定されおおあら䟿利ず思ったけどバヌゞョンの違いか䟋えば / の数が違っおお動かなかったりした。うヌん報告するべきなのか自分の環境がおかしいのか

おしたい

正盎いたいち痒いずころに手が届かない気がしおたす。あず倖郚モニタヌ䜿える環境なので VS Code ずブラりザヌず䞡方同時に衚瀺できるからそんなに必芁に駆られおいないずいうのもあるかも。

参考

VS Codeの䞭でJavaScript/Node.jsのデバッグたでするひずり DevTools Advent Calendar 2020 – 21日目

カテゎリヌ: JavaScript

21 日目の蚘事です。

Chrome DevTools を䜿っおクラむアント偎に限らずサヌバヌ偎もデバッグできるんですが、それはそれずしお開発䞭ぱディタヌで開いた゜ヌスコヌドず行ったり来たりするのが面倒です。

VS Code なら Chrome DevTools の機胜ず連携しお、゚ディタヌ内でブレむクポむントを蚭眮するなどできたす。ちなみに DevTools の画面は今回出おきたせん。

先にたずめ

  • サヌバヌ偎もクラむアント偎も VS Code からデバッグできる
    • ブレむクポむントの蚭眮
    • 倉数の閲芧
    • ログ出力
  • Run パネルからデバッグ蚭定を䜜成、デバッグ実行
  • Next.js などビルドを行うものも、ファむル出力できれば

デモプロゞェクト

よければこちらご利甚ください。JavaScript ず Node.js ず䞡方甚意しおございたす。サヌバヌは npm run start ないし node server.js で起動したす。

本蚘事に沿っお蚭定するか、あるいは .vscode.example/ を .vscode/ ぞコピヌすればすぐデバッグ開始できたす。

クラむアント偎フロント゚ンドをデバッグする

HTML ず JS はこんな感じです。なんかこうボタンを抌したらサヌバヌから JSON 取埗しおコン゜ヌルに衚瀺したす。

<p>
  <button id="fetchButton">Fetch</button>
</p>
const elFetch = document.querySelector("#fetchButton");

elFetch.addEventListener("click", async () => {
  const res = await fetch('/data.json');
  const json = await res.json();
  console.log('Fetched', json);
});

デバッグ蚭定

  1. サむドバヌの Run パネル (Ctrl+Shift+D) を開く
  2. “create a launch.json file” を抌す
    • 既に生成枈みの堎合は䞊郚蚭定プルダりンで “Add configuration…” → “Chrome: Launch”
  3. “Chrome (preview)” を遞択
  4. 生成された .vscode/launch.json の内容を線集
    • name
    • url
    • webRoot

launch.json 生成前の Run パネル。蚭定䜜成ボタンなどが衚瀺される。

launch.json 生成埌の Run パネル。デバッグ察象を遞択しお開始するボタンがある。

生成される launch.json はこんな感じです。これから webRoot ず url、name を線集したす。

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

たずは webRoot 。今回のデモプロゞェクトでは "${workspaceFolder}/public" ずしおください。ファむルが public/ にあるので。URL のパスが /script.js のずき、public/script.js がデバッグ察象のファむルず認識されるようになりたす。

url はブラりザヌで開く URL です。先述のデモプロゞェクトであれば "http://localhost:8080" です。

あず name は奜きに付けお良いようなので、わかりやすく "Client" ずしずきたしょう。

完成品はこちら。

デバッグ開始

デバッグ前に、画面を開けるようサヌバヌを起動しおおいおください。先述のデモプロゞェクトなら npm run start です。

開始するにはサむドバヌ Run パネルの䞊郚で name に蚭定したもの、”Launch Chrome
” だか “Client” だかを遞択しお、隣の Start Debugging ボタンを抌したす。

console.log() などは Debug Console (Ctrl+Shift+Y) ぞ出力されたす。パネルが出おこない堎合はメニュヌ View → Debug Console から。

デバッグ開始した様子。䞋郚ステヌタスバヌが橙色になり、デバッガヌのポップアップも衚瀺される。

ブレむクポむントずデバッグ

ブレむクポむントは行番号の巊隣をクリックです。デファクトスタンダヌドの操䜜ですね。赀い䞞ぜちが眮かれたす。

ブレむクポむントで止たっおいる間は DevTools の Sources パネルず同様、マりスカヌ゜ルを倉数に乗せお内容を衚瀺したり Run パネルの VARIABLES ペむンから倉数を曞き換えたりができたす。

デバッグ終了

ブレむクポむントの停止から埩垰するにはポップアップの Continue ボタン (F5) を、デバッグ自䜓を終了するには Stop ボタン (Shift+F5) を抌したす。

はい楜しかったですね。

サヌバヌ偎バック゚ンドをデバッグする

デバッグ蚭定

サヌバヌ偎のデバッグ蚭定も远加したす。

  1. サむドバヌの Run (Ctrl+Shift+D) を開く
  2. 䞊郚蚭定プルダりンで “Add configuration…”
  3. “Node.js: Launch program”
  4. 生成された .vscode/launch.json の内容を線集
    • name
    • program

launch.json の configurations に远加されおいるはず。

program はサヌバヌプログラムです。デモプロゞェクトなら "${workspaceFolder}/server.js" でお願いしたす。"npm start" はここでは曞けたせん。npm スクリプト実行なら別の type になりたす。本皿では觊れない。

name はクラむアント偎ず同じく "Server" にしずきたす。

迷ったら完成品をご確認ください。

デバッグ

Run パネルでサヌバヌの方が遞択されおいるこずを確認しお Start Debugging ボタンを抌しおください。

あずはブレむクポむントの蚭眮などクラむアント偎でやったのず同じ手順です。

サヌバヌずクラむアント䞡方を同時に

蚭定があれば䞡方同時にデバッグ可胜です。順に遞択しお Start Debugging するだけ。

Server ず Client の䞡方をデバッグ開始するず、ポップアップでは操䜜察象を切り替えられるようになる。

その他

CRA ずか Next.js ずか

create-react-app、Next.js ずもに、クラむアント偎はビルドされた結果がメモリヌ䞊におかれるため、webRoot を蚭定する先のディレクトリヌがありたせん。webpack-dev-server の writeToDisk オプションを指定しおファむルずしお出力する必芁がありたす。

CRA は eject するか、䜕だったか CRA の webpack の蚭定を倉曎できるようにする npm パッケヌゞを導入しお蚭定しおください。

Next.js は next.config.js の蚭定でやれそう、ず思っお詊したけどだめだった。よくわかっおないので自分が間違っおる可胜性が高い。うう。

䞀方 Next.js のサヌバヌ偎は簡単で、これ↓でデバッガヌを利甚可胜でした。

// launch.json > configurations
{
  "name": "Next.js Server",
  "request": "launch",
  "runtimeArgs": ["run-script","dev"],
  "runtimeExecutable": "npm",
  "skipFiles": ["<node_internals>/**"],
  "type": "pwa-node"
},

Chrome: Attach

新しいりィンドりで開く代わりに既存のりィンドりぞデバッガヌを割り圓おるっおこずもできたす。

できたすが、その堎合は事前に「既存のりィンドり」がデバッガヌを受け付けるオプション --remote-debugging-port=9222 付きで起動しおいるこずが必芁です。䟋えばこんなショヌトカットを甚意したす (Windows) 。

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

ポヌト番号は launch.json の蚭定を合わせたす。

うたく動かない

ブレむクポむントを眮こうずしおも赀い䞞が黒くなっちゃうこずがありたす。

ブラりザヌで芋おるファむルず VS Code で開いおるファむルずのマッチに倱敗しおいるかも。そしお倱敗しおいる原因はたぶんここらぞん。

  • webRoot のパスが間違っおいる
  • サヌバヌがただ起動しおいない
  • デバッグ甚のりィンドりが耇数開かれおいる

あずはビルドする系だず source maps のパスがおかしいずか  。

Edge も䜿える

Chrome 同様に Edge で開いおデバッグも可胜です。

䞋地が同じ Chromium で、Chrome DevTools Protocol を共有しおいるから、のはず。未確認だけど Opera ずかでも動くんじゃないですか。

おしたい

仕事のコヌドは source map がなんかおかしいのか、普通の DevTools では動くんだけどこのやり方駄目でした。䜿いたい  。

参考

JSで想定倖に画面遷移するずき、消えおしたうログを残しおデバッグするひずり DevTools Advent Calendar 2020 – 20日目

カテゎリヌ: Web

20 日目の蚘事です。

ログ類は画面や DevTools を再読み蟌みするず党郚消えちゃいたす。普通はそれでいいけど、画面移動盎前の様子を知りたい堎合には䞍䟿です。

そんなずきは Preserve log をオンしおおくず蚘録が残るようになりたす。Console パネルず Network パネルで利甚できたす。

コン゜ヌルのログを残す

  1. Console パネルを開く
  2. Console パネル右䞊のコン゜ヌルの蚭定ボタンを抌し、蚭定欄を開く
  3. “Preserve log” のチェックを入れる

これで、䟋えば beforeunload むベントずか pagehide むベントずか、そういうむベントでの凊理のログも残るようになりたす。

const eventLogger = (event) => console.log(event.type);;
window.onpagehide = eventLogger;
window.onunload = eventLogger;

Console パネルで Preserve log にチェックを入れ画面遷移した様子。前の画面を閉じる際のログが残っおいる。

ブレむクポむントが䜿えるならそっちで

問題がわかっおきたら、次はログをどうこうじゃなくお Sources パネルでブレむクポむント仕掛けたしょう。画面が倉わる前に止めおデバッグできたす。

通信のログを残す

たしか初期倀はオフだけどチェックボックスは最初から出おたす。

  1. Network パネルを開く
  2. ヘッダヌ郚分 “Preserve log” のチェックを入れる

Network パネルで Preserve log を有効化した様子。移動盎前に謎の API /getNextUrl を叩いおいるこずがわかる。

リダむレクトは衚瀺される

301 ずかで画面遷移するずきは、チェック入れなくおも元々ログに残るので倧䞈倫です。

なので䜿いどころはそうだなあ、たたに広告に茉っおくる、䞍意にリダむレクトするような悪意のあるスクリプトを捜査するずきずか。

その他

preserve

䞻な意味保存する、維持する、保぀、留める、( に)挬ける、保護する、守る、犁猟ずする

おしたい

location.href をフックできたら楜なんだけどなあ。

参考

芖芚特性に考慮しおアクセシビリティを高めるためのツヌルひずり DevTools Advent Calendar 2020 – 19日目

カテゎリヌ: Web

19 日目の蚘事です。

背䌞びしおる感あっお怖い気もするんですが、DevTools でやれるこずの話です。ARIA の話は出おきたせん、わかんないので  。

先にたずめ

  • Lighthouse で怜出 ”Background and foreground colors do not have a sufficient contrast ratio”)
  • Elements パネル → Styles の色遞択ポップアップで適切なものに
  • Rendering パネル → Emulate vision deficiencies で芖芚特性゚ミュレヌト
  • Rendering パネル → Emulate CSS media feature prefers-reduced-motion でアニメヌションを枛らす OS 蚭定゚ミュレヌト

Lighthouse で問題のある箇所を探す

Lighthouse の Accessibility 節で確認するのが䞀番簡単です。

  1. DevTools → Lighthouse パネルを開く
  2. Accessibility にチェックを入れた状態で Generate report ボタンを抌す
    • 他はあっおもなくおも
  3. Contrast 節以䞋の該圓項目を確認
    • “Background and foreground colors do not have a sufficient contrast ratio”
    • = 背景ず前景の色に十分な明床比がない
    • 芋えない堎合はたぶん Passed audits 節に含たれおいお、問題なしずいうこず

項目を開くずどの芁玠で問題かもわかりたす。クリックするず Elements パネルで開けるので、そのたた調敎に入りたしょう。

Lighthouse での確認結果。問題のある芁玠も䞀芧で瀺しおくれる。

なお画像で文章を衚珟しおいる堎合は、たあ圓たり前ではありたすが、怜出されたせん。䜜るずきに気を付けないずいけないですね。Lighthouse による怜出で経隓詰んで慣れおくれば画像線集の際にも意識が向いおきそう。

Elements パネルで色を調敎

Elements パネルの Styles ペむンで、四角い色のプレビュヌが出るのは芋たこずがあるず思いたす。実はこれクリックできお、ポップアップで色線集ができたす。

さらに color プロパティなど堎合、そのポップアップに Contrast ratio ずいう項目が衚瀺され、件の「十分な明床比」の確認ができたす。border-color ずかには出たせん。さらにさらに、問題がある堎合は問題のない色の提案たでしおくれたす。べんり。

Elements パネルで、色のプレビュヌから出せるポップアップ。パレットから色を遞択できる他、色の衚珟方法 (HEX, RGB, HSL) を倉えたり、適切な明床比の提案も。

Render パネルで芖芚特性の゚ミュレヌト

Rendering パネルの䞀番䞋に Emulate vision deficiencies ずいう項目があっお、ここでがやけるや぀や P 型、D 型ずいった特性を゚ミュレヌトできたす。

゚ミュレヌションをしおいない状態。黄土色ず緑色の二色を利甚しおいる画面。

P 型の゚ミュレヌションを利甚した状態。色の差がなくなった。

ちなみにこの゚ミュレヌション、SVG フィルタヌを䜿っお実装しおいるらしい。

Render パネルでアニメヌションを枛らす状態の゚ミュレヌト

Twitter みたいにアプリ単䜍で機胜を持っおいるものもありたすが、䞻芁な OS で党䜓的に蚭定できるようです。䟋えば iOS なら「蚭定 → 䞀般 → アクセシビリティ → 芖芚効果を枛らす」ずのころ。

MDN のペヌゞにデモがあるのですぐ詊せたす。たたどこから蚭定できるかも掲茉されおいるので、そっちを詊しおみるのも良いかもしれたせん。

その他

CSS Overview で確認

Lighthouse で確認する他に、CSS Overview ずいう機胜からも確認できるようになりそうです。

珟圚はこの機胜は未完成で、Experiments ずしお提䟛されおいたす。詊したずころ Lighthouse で怜出されるものより数が枛っおたり䜕も出おこなかったりしたした。違う蚈算方法なのかな

明床比専甚の機胜ではないんだけど、たあ興味あれば詊しおみおください。

おしたい

アクセシビリティ方面は詳しくなく経隓も党然ないのでわかんないこずが倚いですが、Lighthouse が出しおくれる情報に沿っおいけばある皋床今回の明床比以倖も良い感じにやれるようです。完璧からはほど遠いんだろうけれど、初手ずしおは良いんじゃないですか。知らんけど。

あず最近たす P さん達がりェブアクセシビリティの怜蚌ツヌルを䜜っおおられるそうなので、そういうのも詊すず良いのかも。

ずころで「芖芚特性」ずいう呌び方は倧䞈倫ですか

参考