Web Vitals - Chrome Web Store
Measure metrics for a healthy site Web Vitals are quality signals key to delivering great UX on the web (https://web.dev/vitals). This extension measures the Core Web Vitals, providing instant feedback on loading, interactivity and layout shift metrics. It is consistent with how these metrics are measured by Chrome and reported to other Google tools (e.g. Chrome User Experience Report, Page Speed
なぜChromeはURLを殺そうとするのか？ (Chrome Dev Summit 2019) - ぼちぼち日記
今年もChrome開発者の集まりChrome Dev Summit 2019 (CDS) がサンフランシスコで開催されました。 今回、私が Chrome Customer Advisory Board (CAB) に選出していただいたこともあり、CDSに初めて参加しました。 これは、CDS終了後のCAB meetingで頂いたChrome Dinosaurフィギュアです。ちなみにゲームはできません。 タイトルの「なぜChromeはURLを殺そうとするのか？」は、2日目Chrome Leadsのパネルセッションで司会のGooglerが、Chrome UX担当のProduct Managerに対して一番最初に投げかけた問いです。 PMは直ちに「そんなことはしない」と即答しました。しかしChromeは、URLの表示領域からHTTPSの緑色表示の廃止・EV表示場所の移動・wwwサブドメイン表示の削
Browser-level image lazy loading for the web | Articles | web.dev
Browser-level image lazy loading for the web Stay organized with collections Save and categorize content based on your preferences. You can use the loading attribute to lazy-load images without the need to write custom lazy-loading code or use a separate JavaScript library. Here's a demo of the feature: Lazy-loaded images load as the user scrolls through the page. This page walks through the detai
CarloでNode.jsのツールにUIをもたせる - Qiita
先日、GoogleがCarloというライブラリをリリースしました。 少し気になったので、軽くメモを残しておきます。 Carlo is 何 CarloはChromiumを画面描画エンジンとして動作するNode.js アプリケーションフレームワークです。 Node.js、ChromiumともにV8が動作するため、JavaScriptのみでデスクトップアプリが作れるよ、というわけです。 公式のサンプルとほぼ一緒ですが、次のようにコードを書くと、index.htmlがデスクトップアプリ風に立ち上がります。 const carlo = require('carlo'); (async () => { const app = await carlo.launch(); // html/CSS/JavaScriptを配置しているフォルダを教える app.serveFolder(__dirname); /
ブラウザ拡張の権限でどこまで悪いことをできるのか？とその対策【デモあり】 - Qiita
[2018/07/07 追記] 本記事ではChrome拡張について説明していますが、Firefox1やEdgeの拡張機能もほぼ同じ仕組みで動いています。 [2023/11/06 追記] #参考 ページを追加しました。 Chrome拡張。便利な機能を簡単に追加できるので使っている人も多いと思います。 ただ、インストール時の権限の注意書きが分かり難いので無条件に承認（追加）していることもあるのではないかと思われます。 そこで、本記事ではChrome拡張の権限の種類・確認方法の他、拡張がどこまで（悪いことを）できるのかとその対策を3段階の権限（危険性）レベルごとに紹介していきたいと思います。 便利だが危険性もあるChrome拡張 Chrome拡張をインストールすると、Webページを読むというブラウザ本来の機能だけでなく様々なことができるようになります。 例えば、Webメールの新着通知や記事などの
Puppeteer Recorder - Chrome Web Store
A Chrome extension for recording browser interaction and generating Puppeteer & Playwright scripts
Profiling React component performance with Chrome devtools - Calibre
Ben Schwarz November 28, 2017 (Updated: October 27, 2020) React was one of the first major front-end frameworks to not only name, but tout its rendering performance. React’s virtual dom is famous for efficiently rendering components—but what happens when those components suddenly don’t feel fast anymore? Where do you look? How do you fix it? In this walk-through, we’ll show how to find and fix slo
ブラウザのネットワークエラーをレポートさせるNetwork Error Loggingが来た - ASnoKaze blog
20180727追記 CORS対応が必要になりました asnokaze.hatenablog.com 20180703追記 ドキュメントはhttps://w3c.github.io/network-error-logging/ にが移されました 20180608追記 仕様上は、jsonの各値はハイフンではなく、アンダースコアを使用するようになります report-to => report_to max-age => max_age ... etc https://github.com/WICG/network-error-logging/commit/86c4d1c0fa4c5d5ca1d8bdcd9fa931e7e4ab65c2 こんな感じ nel: {"report_to": "network-errors", "max_age": 2592000, "include_subdomai
リアル調査案件で使ったPuppeteer - Qiita
Meguro.es #15 @ Drecom 2018年5月22日 自己紹介 ちきさん Twitter/GitHub/Qiita: @ovrmrw 市ヶ谷のオプトという会社で働いています。初心者です。 今回のGitHubリポジトリ 今日話すこと 実際に降り掛かってきた調査案件でPuppeteerを使って地獄を回避した話。 日々降りかかる調査案件 「計測タグの発火タイミングを調べて」 ＿人人人人人人人人人人＿ ＞ ふわっとした依頼 ＜ ￣Y^Y^Y^Y^Y^Y^Y^Y^Y￣ 課題 「発火タイミング」と一口に言ってもページ上の他の要素も絡んで結構ばらつきがあるので、何十回も計った上で平均を取る必要があった。 色々な調査パターンの組み合わせがあり、その数は72もあった。 72パターン x 10回 としても合計720回。 「ツールで自動化した数値はあてにならないから手動でやって」 by PM ＿人
Storybookとreg-suitで気軽にはじめるVisual Regression Testing - wadackel.me
約半年前に「Puppeteer を使った Storybook の自動スクリーンショット撮影用のアドオンを作った」という記事を書きました。この時 storybook-chrome-screenshot というアドオンを作って公開した紹介でした。 当初は React のみのサポートだったのですが継続的に手を加えていて、最近 Angular と Vue.js へのサポートが完了したり、機能的にも大分実用的になってきました。 そこで今回は、storybook-chrome-screenshot と reg-viz/reg-suit を使って Visual Regression Testing (視覚回帰テスト) を導入して、ありがたみを感じるところまでを書いていきたいと思います。 だらだら書いていたら思っていたよりも長くなってしまったので、各種ツールのセットアップ だけで充分という方は読み飛ばして
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CrUX on BigQuery | Chrome UX Report | Chrome for Developers
GitHub - microsoft/playwright: Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.
Node V8 GC-related options
Suspicious Site Reporter
https://github.com/GoogleChrome/lighthouse/blob/master/docs/puppeteer.md
GitHub - GoogleChromeLabs/wasm-feature-detect: A small library to detect which features of WebAssembly are supported.
Blink LazyLoad Design Doc (public)
GitHub - GoogleChromeLabs/ndb: ndb is an improved debugging experience for Node.js, enabled by Chrome DevTools
GitHub - CondeNast/perf-timeline-cli: Generate Chrome Performance Timelines via a command line interface
GitHub - schickling/chromeless: 🖥 Chrome automation made simple. Runs locally or headless on AWS Lambda.
