ブラウザーにChromeのデベロッパーツールを埋め込めるReactコンポーネントを作ってみた
とてもニッチな用途で使えるコンポーネントですがその場のiframeのデバックができるReactコンポーネントを作ってみました！ まずはこちらのポストをご覧ください！ このポストではChromeのデベロッパーツールを開いているわけではなく、ブラウザー内に直接デベロッパーツールが埋め込まれています！ 今回はこのようなReactコンポーネントを作ってみたので、どのように作ったかをご紹介したいと思います。 デモページ こちらのページで実際にデモを試すことができます。 https://react-embed-devtools.vercel.app/ なぜ作ったか Reactをオンラインで学習できるサービスmosya Reactを先日リリースしました。 このサイトではオンライン上でコードを書いてその場で書いたコードがプレビューできるようになっています。 詳しい開発記事はこちらをご覧ください！ ただ、プ
Fighting cookie theft using device bound sessions
$200K 1 10th birthday 4 abusive ads 1 abusive notifications 2 accessibility 3 ad blockers 1 ad blocking 2 advanced capabilities 1 android 2 anti abuse 1 anti-deception 1 background periodic sync 1 badging 1 benchmarks 1 beta 83 better ads standards 1 billing 1 birthday 4 blink 2 browser 2 browser interoperability 1 bundles 1 capabilities 6 capable web 1 cds 1 cds18 2 cds2018 1 chrome 35 chrome 81
Iterator helpers · V8
Iterator helpers are a collection of new methods on Iterator prototype that help in general use of iterators. Since these helper methods are on the iterator prototype, any object that has Iterator.prototype on its prototype chain (e.g. array iterators) will get the methods. In the following subsections, we explain iterator helpers. All the provided examples are working in a blog archive page that
New in Chrome 123 | Blog | Chrome for Developers
Here's what you need to know: Adapt your color-scheme with the new light-dark() function. Diagnose responsiveness on your site with the Long Animation Frames API. Avoid service worker start-up performance penalties with the Service Worker Static Routing API. And there's plenty more. I'm Adriana Jara. Let's dive in and see what's new for developers in Chrome 123. light-dark() CSS function. The ligh
Chrome で text-spacing-trim プロパティがサポートされたぞ！！
Chrome の挙動を見てみる 百聞は一見に如かずと言いますので、実際の挙動を見てみます。以下の図では、text-align: justify を指定したテキストボックスに対し、上段には space-first を、下段には従来の挙動である space-all を設定しています。上段は下段に比べて、自然な組版が実現されていることが見て取れます。 文章は 京葉線 - Wikipedia を改変して使用。CC BY-SA 画像からは、以下の挙動が確認できます。 行頭の括弧（橙色） 1 行目のみアキが残り、2 行目以降は行頭のアキが詰まる（space-first であるため） 連続する約物（ピンク色、青色、緑色） 読点→句点、閉じ括弧→閉じ括弧ではアキなし、中黒→括弧、閉じ括弧→開き括弧では二分（1/2）–全角程度のアキに調整される 行末の閉じ括弧（青色） 必要に応じて行末のアキが詰まる 行末の
CVE-2023-5480: Chrome new XSS Vector
Chrome XSSThe article is informative and intended for security specialists conducting testing within the scope of a contract. The author is not responsible for any damage caused by the application of the provided information. The distribution of malicious programs, disruption of system operation, and violation of the confidentiality of correspondence are pursued by law. PrefaceThis article is dedi
Tracing 101 - Perfetto Tracing Docs
This page provides a birds-eye view of performance analysis. The aim is to orient people who have no idea what "tracing" is. Introduction to...PerformancePerformance analysis is concerned with making software run better. The definition of better varies widely and depends on the situation. Examples include: performing the same work using fewer resources (CPU, memory, network, battery, etc.) increas
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Chrome Platform Status
Chrome 124 | Release notes | Chrome for Developers
GitHub - liriliri/chii: Remote debugging tool
GitHub - WICG/dbsc
Performance tooling in 2024 and beyond | Blog | Chrome for Developers
Supercharge your PDF reading: Follow references, skim outline, jump to figures
Intent to Ship: Zstd Content-Encoding
The next step toward phasing out third-party cookies in Chrome
GitHub - rshev/MoveTabToNextWindow: Move tab to next window browser context menu/button extension
Chrome Tracing for Fun and Profit - Slack Engineering
Digging through Chrome traces: an introduction with an example
Intent to Ship: Fenced Frames - Enable Leaving IGs, and Ads Report at Top Level Navigation Start (Chrome - 120)
1498140 - chromium - An open-source project to help move the web forward. - Monorail