Awesome Dev Tool Tips 🔥
Contents (Click to expand) ↕️ Design Mode Pretty Print Command Pallet and Super Search Snippets Live Expressions Tracking Changes Console Shorthand Find Unused Code Rendering Panel Network Paint Times Network Timings Inspect Network Requests Performance Identifying Memory Leaks Raw Memory Inspection Test bfcache Full Refresh Lighthouse Page Size Breakdown Record User Flows Advanced User Flow Opera
開発体験を変える! Chrome DevTools Tips 7選 - Qiita
最近Chrome DevToolsについて調べていて発見した便利機能を紹介します。 誰もが使える最高便利な開発マシンChrome DevToolsを使いこなして開発体験を変えましょう！ 1. $0で選択中のDOM要素の取得 特定の要素に何かしたいという時には、要素のIDやclassを確認してConsoleでdocument.querySelector("#xxx")で取得するというのが一般的だと思います。実はそれはカーソル選択と$0で代替できます。 Classや、IDがついていない特定のDOMを取得したい時とかにも使えるので地味に便利です。 手順 カーソルで取得したい要素を選ぶ Consoleタブで$0を入力 最近知ったChrome DevToolsの便利機能① $0 での選択中のDOM要素取得 Elementsタブで選択状態のDOM要素は、Console上で $0 を入力することで取得で
Webブラウザ上で純粋なHTTPだけで単方向リアルタイム通信を可能にするHTTPのストリーミングアップロードが遂にやってくる - nwtgck / Ryo Ota
Web標準のHTTPクライアントfetch()でストリーミングしながらアップロードできるようになる。
Chrome Platform Status
Try out our new features page Filter By Features:
YouTubeでの英語学習がはかどるGoogle Chrome拡張機能 | ライフハッカー・ジャパン
ほかにも右枠に英語字幕が表示されますので、動画中の字幕が一瞬で消えてしまったとしても、前後のセンテンス含めて追えますよ。 単語の意味の確認はマウスカーソルをあてるだけScreenshot: 山田洋路 via LLY知らない単語が出てきたときには、英語字幕にマウスオーバーすると辞書がポップアップ。動画中/右枠どちらの字幕からも単語辞書は確認できて、マウスオーバーの際に一時停止するよう設定できます。 同じように、いったん止めて意味を確認したいときや、今のフレーズをもう一度再生して聞き直したいときには、スペースキーや方向キーを押すだけで操作可能です。 目的に合わせて字幕のオン/オフを切り替えScreenshot: 山田洋路 via LLY英語字幕を見つつ、わからないところが出てきたら日本語字幕に頼る…というような使い方が想定されますが、つい日本語字幕を見てしまうのなら設定から非表示に。 リスニン
Chrome拡張の高速な英語辞書ツールをつくりました(Mouse Dictionary) - Qiita
経緯 もともとMouseoverDictionaryという素晴らしいFirefox用辞書があったのですが、Quantumの登場とXULの廃止とともに使えなくなってしまったため、自分用にChrome拡張をつくった次第です。 ソースコード 実装に関わる技術寄りの用語: React, esbuild, chrome.storage.local, chrome.storage.sync, Cross-extension messaging, Hogan, debounce, resizable/draggable, intl.v8BreakIterator, deinja, クロスブラウザ, など。 ※詳細は「Mouse Dictionaryの技術的な話」をご参照ください https://qiita.com/wtetsu/items/2a5568cb0b5a38c003fb 使い方 インストール
ArchLinuxクライアントPCことはじめと利用プロダクトまとめ
こんにちは。CTOの馬場です。 先日 勤続10年になるCTOが異動のついでにMacをやめてArchLinuxにした話 で書いたとおり、最近はArchLinuxでvimやDocker、Vagrant + VirtualBoxを使ってPythonやGolangを書いて暮らしています。 最近「Macやめてみて、その後どうですか？」とよく聞かれるので、現状を共有します。 結論としては特に問題なく普通に暮らしています。 利用していた/利用しているプロダクト 「あれってどうしてます？」みたいなのをよく聞かれるので表を作りました。 漏れてる(私が忘れてる)ものもあると思うので、 他に気になるものがあればお声掛けください。 代替プロダクト、最初は探すのにちょっと難儀しますが、 どうということはありません。 pacmanかaurで揃っちゃうので管理はとても楽です。 ジャンル Mac時代 Linux時代
パフォーマンス計測に困らない！tracing活用術100 - Qiita
本記事ではChrome内蔵のプロファイリングツール、tracingの活用方法を紹介する。 本記事は私の個人的な意見に基づき書かれております。私の所属する組織、団体には一切の関係はありません。 はじめに Chromeは誕生以来、常に最速のブラウザを目指して開発されてきた。しかし処理速度を向上させようと頑張ると、うっかりメモリ使用量や電力消費量を犠牲にしてしまう可能性がある。特にAndroidのような携帯端末ではメモリや電池寿命の制約が強く、あらゆるデバイスで最高の使い心地のChromeを目指す上では、これらのトレードオフを実際のデータで深く理解した上で開発の意思決定をする必要がある。 このような背景から、処理速度・メモリ使用・電力消費をはじめ、あらゆるパフォーマンスデータを時系列で統合的に理解出来るように開発されたのがChrome内蔵プロファイリングツール、tracingである。 多機能が故
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
社内でフロントエンドのパフォーマンスチューニングコンテストを開催した