知っておくとかなり便利！Chromeのデベロッパーツールであまり知られていない実用的な機能とテクニックのまとめ
Chromeのデベロッパーツールは、Web制作に欠かせないといっても過言ではありません。DOMインスペクター、スタイルパネル、JavaScriptコンソールなど基本的な機能だけでも便利ですが、さらに便利になる機能も数多くあります。 デベロッパーツールを使って、Webページやアプリの制作・デバッグのワークフローが大きく改善される実用的で便利な機能とテクニックを紹介します。 Mastering Chrome Developer Tools: Next Level Front-End Development Techniques 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ダークテーマ 02. 要素をすばやく選択できる選択モード 03. グローバル変数として格納 04. アニメーション用のツール 05. 要素の疑似状態をシ
ECMAScript 6 compatibility table
V8 SpiderMonkey JavaScriptCore Chakra Carakan KJS Other ⬤ Minor difference (1 point) ⬤ Small feature (2 points) ⬤ Medium feature (4 points) ⬤ Large feature (8 points) Compilers/polyfills Desktop browsers Servers/runtimes Mobile Feature name Current browser ES6 Trans- piler Traceur Babel 6 + core-js 2 Babel 7 + core-js 2 Babel 7 + core-js 3 Closure 2020.06 Closure 2020.09 Closure 2021.08 Closure 20
Chrome拡張では、Background pages よりも Event pages を使用したほうが良い - よんちゅBlog
これからChrome拡張を作る方には是非知っておいて欲しい機能、Event pages についての話です。 Event pages は、作成したChrome拡張によっては、必ずしも使用できるわけではありませんが、もし可能なら積極的に使用してほしいと思います。 公式ドキュメントでも、Background pages のページ冒頭には、以下の様な注意書きがなされています。 Caution: Consider using event pages instead. Learn more. via: Background Pages - Google Chrome なぜ Event pages なのか 理由を詳しく説明すると、 Background pages を使用している拡張は、Chrome起動時にプロセスが起動され、以降Chromeが終了するまで生き続けます。 よって、例え Backgroun
ChromeのEvent Pagesで実現する省メモリな拡張機能
Chromeの拡張機能のリソース消費を抑える仕組みであるEvent Pagesを紹介します。 Chromeの拡張機能では、Background Pageというページを裏に常時開いておき、外からのイベントやメッセージに応じて処理を行うという構成が一般的です。すなわち、ブラウザを起動してから終了するまでの間ずっとページを開いたままということになり、拡張機能の数が増えるとプロセス数やメモリ使用量はかなりのものになります。 そこで導入されたのがEvent Pagesです。Event Pagesを利用すると、ページが常駐しなくなるため、リソース消費が削減されます。イベントやメッセージを処理する必要がある時には自動的にEvent Pageが開かれ、処理が終わってしばらくするとまた閉じられます。 導入方法 Event Pagesの仕組みは勝手に適用されるわけではなく、拡張機能側の対応が必要です。 まず、
Chrome 拡張機能のマニフェストファイルの書き方 - Qiita
お断り (2022-12-13 追記) この記事はマニフェストのバージョンが 2 の時点で作成したものですが、マニフェストの最新バージョンは 3 であり、Chrome Web Store においてはバージョン 2 の拡張機能が すでに受け付けられない状態 です。 それでもなおこの記事を参照される場合は、公式の マイグレーションガイド も合わせてご確認いただければと思います。 Overview https://developer.chrome.com/extensions/manifest についての自分用おぼえがきです。 マニフェストファイルの書き方にフォーカスしていますので、個々の用語の説明などは端折ったりしています。 記載が必須の項目 以下の項目は、マニフェストファイルに必須です。 manifest_version マニフェストファイル自身のバージョンです。 現在のバージョンは 2 で
覚えておきたいDevToolsのコマンドラインAPIまとめ - Qiita
DevTools、使ってますか？ もはやChromeじゃないと開発できないくらいに飼い慣らされています。 ブレークポイントやconsole.logなど基本的な使い方から、TimelineとAuditsを使ってのパフォーマンス計測などなど、DevToolsのポテンシャルは計り知れません。 個人的にはConsole APIが好きなんですが、今回はConsoleパネルで使える Command Line API の使い方についてまとめてみました。 $_ $_には最後に評価した式の結果が保存されています。 Console上で計算を行なった場合や、$セレクタなどでDOMを検索した結果など、最後の結果が常に保存されます。 $0 〜 $4 $0から$4にはElementsパネルで選択した要素が5つ保存されています。$0が最後に選択した要素で数字が増えるごとに過去に選択した要素になります。 $0は特に使いや
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Cross-origin network requests | Chrome Extensions | Chrome for Developers