Chrome DevTools Protocol（CDP）は、デベロッパーが実行中の Chrome ブラウザと通信できるようにするリモート デバッグ プロトコル（API）です。Chrome DevTools は CDP を使用して、ブラウザの状態の検査、動作の制御、デバッグ情報の収集を支援します。CDP を使用する Chrome 拡張機能を作成することもできます。 たとえば、次の CDP コマンドは、指定された styleSheetId のスタイルシートに、指定された ruleText を含む新しいルールを location で指定された位置に挿入します。 { command: 'CSS.addRule', parameters: { styleSheetId: '2', ruleText:'Example', location: { startLine: 1, startColumn:
Windows、Mac、Linux パソコンから Android デバイスのライブ配信コンテンツをリモートでデバッグできます。このチュートリアルでは、次の方法について説明します。 リモート デバッグ用に Android デバイスを設定し、開発マシンから検出します。 開発マシンから Android デバイスのライブ コンテンツを検査してデバッグする。 Android デバイスのコンテンツを開発マシンの DevTools インスタンスにスクリーンキャストします。 ステップ 1: Android デバイスを検出する 以下のワークフローは、ほとんどのユーザーに適しています。詳しくは、トラブルシューティング: DevTools が Android デバイスを検出しないをご覧ください。 Android で [開発者向けオプション] 画面を開きます。デバイスの開発者向けオプションを設定するをご覧ください
こんにちは、スマートニュース株式会社の紀平です。 SmartNews のアプリ内では、最近 WebView を使った機能を多数公開しております。そのうちの一つにショッピングチャンネルという機能があるのですが、今日はそのショッピングチャンネルのタイムセール枠で以前発生した、謎のプチフリーズ問題の調査手法をご紹介します。 tl;dr 特定の Android 端末でプチフリーズが発生した 再描画領域を減らすことで現象は改善した Chrome の Tracing 機能を利用し、ブラウザのソースコードまで参照して、ついに根本原因まで突き止めた タイムセールで起こった問題 タイムセールは、SmartNews のショッピングチャンネル内において WebView で提供されている、期間限定のお得な商品をアグリゲーションした機能です。EC サイト各社のご協力の上にご提供しております。内部は HTML5 で開
Earlier this year, we announced the availability of Chrome's new Headless mode (--headless=new) in Chrome 112. This mode enables developers to run Chrome in an unattended environment without any visible UI—useful for testing and automation use cases. As part of this announcement, we mentioned our plans to remove the old Headless mode from the Chrome binary. This removal makes sense, as the old Hea
米アルファベット傘下グーグルにインターネット閲覧ソフト「クローム」の売却を命じるよう求める米司法省の提案を裁判所が受け入れた場合、同事業の価値は最大200億ドル（約３兆1000億円）に上る可能性がある。実現すれば、世界有数のテック企業に反トラスト法に基づく事業売却を求める歴史的ケースとなる。 関係者によれば、司法省の反トラスト法執行担当者は、コロンビア特別区（首都ワシントン）連邦地裁のアミト・メータ判事に対し、人工知能（ＡＩ）とスマートフォンの基本ソフト（ＯＳ）「アンドロイド」に関する措置をグーグルに求めるよう要請する方針だ。 ブルームバーグ・インテリジェンス（ＢＩ）のアナリスト、マンディープ・シン氏は、30億人以上の月間アクティブユーザーがいることを考えると、売却が実現した場合、クロームの価値は「少なくとも150億－200億ドル」相当に上ると試算した。 メータ判事は今年８月にグーグルがオ
Dive into the world of cutting-edge AI with the Google Chrome Built-in AI Challenge! This hackathon invites developers to explore new ground by creating web applications or Chrome Extensions that leverage Chrome’s built-in AI APIs and models, including Gemini Nano. The APIs can give you access to: create dynamic user prompts (Prompt API, Prompt API in Chrome Extensions) distill complex information
This tutorial offers a chance to practice by setting up a workspace so that you can use it in your own projects. Workspace lets you to save changes that you make within DevTools to source code that's stored on your computer. Overview Workspace lets you save a change that you make in DevTools to a local copy of the same file on your computer. For example, suppose: You have the source code for your
Restart frame during debugging The Restart frame feature is back! You can re-run the preceding code when paused somewhere in a function. Previously, this feature was deprecated and removed in Chrome 92 due to stability issues. In this example, the debugger initially paused at the breakpoint (line 343) near the end of the toggleColorScheme function. To restart the debugging from the beginning of th
こんにちは。株式会社スタメンでFANTSのフロントエンドを担当している@0906kokiです。 今回の記事では、皆さんおなじみの Chrome Devtools にある Performance タブで、フロントエンドのパフォーマンスを計測する方法について書きたいと思います。 はじめに フロントエンドのパフォーマンス・チューニングと言うとバックエンドと比べて後回しになりがちですが、フロントエンドにアプリケーションの複雑性が寄ってきている現在、フロントエンドがボトルネックでレスポンスのレイテンシーが発生することは往々にしてあると思います。 バックエンドではユーザー数の増加や大量の同時接続に耐えられる負荷対策やパフォーマンス・チューニングが中心となりますが、フロントエンドではプロジェクトサイズの増加による JavaScript ファイルのダウンロードやスクリプティング、レンダリング速度の低下等が
TablesNG launches in Chromium 91, and fixes a ton of bugs that have been a part of the web platform for years. These updates will improve browser compatibility as a part of the #Compat2021 effort, and improve using tables on the web platform overall. Some of the most-starred issues include position: sticky in rows, subpixel geometry, and proper border-collapsing. The TablesNG effort TablesNG is a
こんにちは、ZOZOTOWN部フロントエンドチームの高橋（@anaheim0894）です。 Chrome 92から「SharedArrayBuffer」の仕様が変更されます。それに伴い、ZOZOTOWNの対応方針と解決策をご紹介いたします。そもそも「SharedArrayBuffer」が何のことなのか分からず困っている方も多いかと思います。本記事で紹介するZOZOTOWNの取り組みが対応時に皆様の参考になれば幸いです。 取り組みのきっかけ 2021年3月、Google Search Consoleに以下メッセージが送られてきました。 Googleの公式アナウンスによると、「Chrome 92からはcross-origin isolation（クロスオリジン分離）が構成されていないと正常に動作しなくなる」と書かれていました。 つまりSharedArrayBufferを引き続き使うには、他サイ
How should we be storing data and caching our critical app resources on the client? Is IndexedDB still the best option? What about Local Storage? Let's dive into web storage to learn about the best way to store data in the browser, how much you can safely store, how to check your quota, how browser eviction works, how you can start Chrome with limited storage to test quota exceeded errors, and mor
Developer Advocate という技術啓蒙の担当者として Google に入社して今日でちょうど 10 年が経った。技術以外のことについてはめったにブログを書くことはないのだけど、良い節目なのでこの機会に記録を残しておきたい。 Google 入社のきっかけ # 「インターネットにアイデンティティのレイヤーを作り、インターネット全体をオープンなソーシャルネットワークの基盤にしたい」これが僕が前職で持っていた野望だった。その一歩として、その会社で運営していたポータルサイト全体をソーシャルプラットフォーム化するというアイディアが採用され進める中で、OpenSocial という Google が中心として進めていた技術に取り組んでいた。日本語の情報が少ない分野だったためブログを書いたり、コミュニティ運営や技術講演をしていたら、当時 (今もだけど) 仲良くしてもらっていた田中洋一郎さんに
masawada castを開始する お使いのブラウザはPresentation APIに対応していないようです Presentation APIの練習をやっておきたいとは以前から思っていて、しかしHTMLをもう1個用意するのがめんどうで手が伸びていなかった。 ページめくりなどのコントロールを用意せず、動画を表示してほったらかしにするくらいならちょろっと書けば動く事に気づいたので試してみた。 突然家のテレビでmasawadaさんが表示されるのでおもしろい。PCのChromeでは動いたけど、Androidではうまく動かなかった。押しても反応しないときは動きません。 navigator.presentation.defaultRequestに代入できるのがへえというポイントで、この記事をブラウザ側のUIからキャストしても、この記事ではなくてmasawadaさんが表示される。右クリック禁止みたい
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 免責 この記事は私個人の理解や考え方を元に書かれており、GoogleやChromium Projectの主義・主張を代弁する物ではありません。私自身もChromium Comitterとして、仕事でプロジェクトに貢献する事もあれば、雇用主の意図とは関係なくボランティアで個人の時間を投資している事もあります。 crbugとは Chromium Projectと関わるにあたりいちばん大切な、ソースコードとの付き合い方については、初日にnhirokiさんが書いてくれました。 で、ソースコードの次はバグとの付き合い方。Chromium
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
