What's New In DevTools (Chrome 96) | Blog | Chrome for Developers
Preview feature: New CSS Overview panel Use the new CSS Overview panel to identify potential CSS improvements on your page. Open the CSS Overview panel, then click on Capture overview to generate a report of your page’s CSS. You can further drill down on the information. For example, click on a color in the Colors section to view the list of elements that apply the same color. Click on an element
SharedArrayBuffer と過渡期な cross-origin isolation の話
2021/12/26: Safari も 15.2 から COOP/COEP を使って SharedArrayBuffer が利用できるようになったので、該当箇所の表記を変更しました。 長い記事なので先に結論を書きます。 Chrome、Firefox および Safari で SharedArrayBuffer や高精細タイマーが使えるようになりました。そのためには cross-origin isolation という状態を有効にするのですが、親となる HTML ドキュメントに下記 2 つのヘッダーを送ります。 Cross-Origin-Embedder-Policy: require-corp Cross-Origin-Opener-Policy: same-origin ただ、これを有効にするには様々な条件と制約が存在し、現段階では多くのサイトは苦戦するでしょう。とりあえず従来通り C
Spectre の脅威とウェブサイトが設定すべきヘッダーについて
長い記事なので先に結論を書きます。 Spectre の登場で、ウェブサイトに必要とされるセキュリティ要件は増えました。具体的に必要な対策は下記の通りです。 すべてのリソースは Cross-Origin-Resource-Policy ヘッダーを使って cross-origin なドキュメントへの読み込みを制御する。 HTML ドキュメントには X-Frame-Options ヘッダーもしくは Content-Security-Policy (CSP) ヘッダーの frame-ancestors ディレクティブを追加して、cross-origin なページへの iframe による埋め込みを制御する。 HTML ドキュメントには Cross-Origin-Opener-Policy ヘッダーを追加して popup ウィンドウとして開かれた場合の cross-origin なページとのコミュニ
Chrome の User-Agent 文字列削減のオリジン トライアルと今後の計画について
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
CSS コンテナクエリ（@container）の便利な使い方を解説
CSSのコンテナクエリとは、親コンテナに基づいてスタイルを定義できるCSSの新機能です。これによりコンポーネントを複数のコンテクストで使用でき、コンポーネント単位の実装も簡単になります。 2023年2月14日にFirefox 110にサポートされ、CSSのコンテナクエリはこれですべてのブラウザで利用できるようになりました。コンテナクエリの基礎知識と便利な使い方を紹介します。 Say Hello To CSS Container Queries by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 コンテナクエリの背景 メディアクエリの問題点 コンテナクエリはどのように役立つのか？ コンテナクエリの基礎知識 コンテナクエリの使用例 コンテナクエリのデバッグ方法 まとめ コンテナクエリの背景 私がフロント
What's New In DevTools (Chrome 94) | Blog | Chrome for Developers
Use DevTools in your preferred language Chrome DevTools now supports more than 80 languages, allowing you to work in your preferred language! Open Settings, then select your preferred language under the Preferences > Language dropdown and reload DevTools. Preferences" width="800" height="494"> Chromium issue: 1163928 New Nest Hub devices in the Device list You can now simulate the dimensions of Ne
Chromeデベロッパーツールが日本語🇯🇵をサポート、CWV改善に必須のツールを日本語で使えるように
[レベル: 上級] Chrome 94 のデベロッパーツールが日本語を含む 80 以上の言語で利用できるようになります。 デベロッパーツールを日本語で使う デベロッパーツールを日本語で表示にするには、右上にある歯車アイコン⚙️から言語設定を変更します。 [Language] という項目があります。 ここから [Japanese – 日本語] を選びます。 もしくは [Browser UI Language] を選択すると Chrome 本体で設定している表示言語に合わせられます。 Chrome を日本語で使っていれば、それに合わせてデベロッパーツールの UI も日本語になります（ブラウザ全体の言語とデベロッパーツールの言語は独立している）。 Chrome 94 でデベロッパー ツールを初めて起動したときに、言語変更ができるようになったことを通知するバナーが出てくるかもしれません。 言語を変
ポート10080がつながらないんだけど - Qiita
「先輩、あのサーバーにアクセスできないんですけど...」 「え、できるけど?」 「もしかして、Google Chromeのベータ版に変えたからですかね?」 「仕事でベータ版を使うのはやめまし(略」 「そういえば火狐使ってる同僚も数か月前にそんなこといってて、どこかの設定をいじったとか...」 「呼んだ?」 「はい、さっきChrome更新したら鯖につながらなくなって」 「もしかして、あのポート10080?」 NAT Slipstreaming 「実はな、去年「NAT Slipstreaming」という攻撃手段が見つかってな... 要はウェブサイトがブラウザー経由でLAN内のサーバーにアクセスして、ファイアウォールの設定を変更するっていうものだ。しかもこの攻撃はCSRFとかと違って、攻撃先がHTTPリクエストを受け付ける必要はないんだ...」 NAT Slipstreamingの攻撃方法は、仕
Google 「Cookie廃止」の延期、わかっていることすべて：要点まとめ | DIGIDAY［日本版］
Googleは6月24日、同社の人気ウェブブラウザ「Chrome」におけるサードパーティCookieの廃止期限を、当初の2022年1月から2023年後半まで延長したと発表した。本記事では、GoogleがCookieの廃止を保留するという決定に至った理由について、わかっていることをまとめる。 Googleは、サードパーティーCookieの廃止を2年近く延期にすることにしたようだ。 Googleは6月24日、同社の人気ウェブブラウザ「Chrome」におけるサードパーティCookieの廃止期限を、当初の2022年1月から2023年後半まで延長したと発表した。しかし、この新しい期限でさえも、柔軟に構えているという。 本記事では、GoogleがCookieの廃止を保留し、デジタル広告のエコシステムにおける識別子利用をもう少しだけ認めるという決定に至った理由について、わかっていることをまとめる。 Ad
WebHID APIを使ってJoy-ConとChromeを簡単コネクト - Qiita
Joy-ConとChromeがツナガル こんな感じでJoy-Conをクネクネ動かしたりスティックをグリグリしたりすると、Chromeに表示されたJoy-Conが連動して動きます。Joy-Conって、普段はNintendo Switchでゲームする時に使うコントローラーなので、こうしてブラウザのChromeと連動して動くだけでワクワクします。 このアプリはGoogleのエンジニアの方が作られたもので、以下のGitHubで公開されています。 https://tomayac.github.io/joy-con-webhid/demo/ https://github.com/tomayac/joy-con-webhid どうやっているの？ WebHID APIという技術が使われています。 このAPIを使うことで、Webアプリケーションからニンテンドースイッチのジョイコンやプレイステーションのデュア
Improving user privacy and developer experience with User-Agent Client Hints | Privacy & Security | Chrome for Developers
Client Hints enable developers to actively request information about the user's device or conditions, rather than needing to parse it out of the User-Agent (UA) string. Providing this alternative route is the first step to eventually reducing User-Agent string granularity. Learn how to update your existing functionality that relies on parsing the User-Agent string to make use of User-Agent Client
Google 公式ウェブ開発者向けリソースのご紹介
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
PSIやLighthouse、CrUXレポートなど各種コアウェブバイタル計測ツールが新定義のCLSに対応
[レベル: 上級] Google は、コア ウェブ バイタルを計測するために提供している各種ツールを新しい定義の CLS に対応するようにアップデートしました。 Lighthouse も PSI も CrUX も 新 CLS で計測開始 新定義の CLS で計測するようになったツールは次のとおりです。 Chrome デベロッパーツールの Lighthouse ※Canary チャンネル Lighthouse CLI v8 Lighthouse CI v0.7.3 PageSpeed Insights (PSI) PSI API BigQuery 用 Chrome UX レポート (CrUX) ※2021 年 6 月 8 日に更新 Chrome UX レポート API たとえば、PSI は Lighthouse v8 を利用して新 CLS でのラボデータを現在は提供するようになっています。
Chromeの便利な2つの(やや)新しい機能: QRコード作成とテキストフラグメントURL作成
[レベル: 初級] この記事では、Google Chrome に最近実装された 2 つの便利な機能を紹介します。 QR コード作成 テキストフラグメント URL 作成 URL のダイナソー付き QR コード PC 版 Chrome 88 以上では、デフォルトの機能として URL の QR コードを作成できます。 オムニボックス (URL バー) にフォーカスを当てると、四角が集まったこのようなアイコンが右端に出現します。 クリックすると、今閲覧しているウェブページの URL の QR コードを作成できます。 Chrome のマスコット的キャラクターでもあるオフライン ダイナソー🦖が中央に陣取っているのがユーモアを感じさせますね。 画像としてダウンロードできます。 ウェブサイトに貼り付けたりプレゼンスライドに挿入したりできます。 URL を編集できるので、_utm パラメータを付けておけば
【SEOクイズ】「h1タグは1つだけ」をグーグルは推奨している： ⭕? ❌?【SEO情報まとめ】 | 海外&国内SEO情報ウォッチ
SEOクイズの時間です。「h1タグは1ページに1つだけ」をグーグルは推奨しているでしょうか？ グーグルは検索評価でh1タグをどう扱う？ あなたの知識をチェック！ ほかにも今回は「SEOのテクニック」的なことに関する情報が多めだ。 「コンテンツはファーストビュー内に置くべきか」 「画像を入れるとSEOに影響するか」 「インデックスされて消えてが繰り返す原因は？」 「パンくずリストを設置するメリットは？」 などなど、あなたのSEO力をアップする情報を、今週もお届けする。 ファーストビュー内にコンテンツを置けば検索順位はアップする？画像を設置してもランキングは上がらない、しかしクリック率は……インデックスされたり消えたりを繰り返す、なぜ？Search Consoleパフォーマンスレポートは100%正確ではない!?パンくずリストの2つの利点2021年4月のCWV状況は前月と比べて大きな変化なし検索
Chrome 91 ベータ版: 手書き文字認識、WebXR 平面検出など
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
Chrome 90 ベータ版: WebRTC 用 AV1 エンコーダ、新しいオリジン トライアルなど
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
Automatically record puppeteer tests - Chrome DevTools - Dev Tips
Chrome DevTools: Record tests with the puppeteer recorder Last updated: 25th November 2020 Introduction The Puppeteer Recorder feature in Chrome DevTools can monitor your webpage interactions and generate the code to automate a browser. For example, if you click on an element and type an email address into an email field, the recorder can generate the following code: await page.click("aria/Login")
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ShowNote:「フロントエンド開発の便利ツール・設定・プラグインなど」を語るフロントエンドTechCafe #2 - HackMD
使ってみよう！Angular DevTools
