yano3nora
7/2/2017 - 10:33 AM

[dev: ChromeDevTools] chrome developer tools note. #chrome #dev

[dev: Google Chrome & Chrome DevTools] Modern web browser & dev-tools based on chromium. #dev

chrome_with_devtools.md
content_copyfile_download
  • Rendered
  • Source

Google Chrome

Google Chrome

Discards Tab

chrome://discards/ から開いているタブのアンロード状態を管理できる。

Shortcuts

  • 縮小 / 拡大 Cmd + - / Cmd + Shift + -
  • タブ移動 Cmd + 1, 2, 3...
  • 新しいタブ Cmd + T
  • 擬似的な「タブの複製」 Cmd + l → Cmd + Shift + Enter
  • シークレットウィンドウ Cmd + Shift + N
  • タブ検索 Cmd + Shift + A
  • カーソルブラウジング F7
  • ブラウザデータの削除 Cmd + Shift + Backspace で削除画面へ

Settings

設定 chrome://settings/

検索エンジンの追加

検索エンジンの管理 chrome://settings/searchEngines > その他の検索エンジン
【Chrome】アドレスバーからGoogle以外の検索エンジンで素早く検索する

  • caniuse.com 内の検索 ... など、独自検索エンジンを追加できる
  • クエリ URL にて、その Web サイト独自の検索クエリを %s に検索文字が入る感じで設定
  • あとは検索バーで、キーワード入力 => tab で検索できる

よく使うやつ登録しとくと鬼便利。あと gist とかはクエリを工夫して「自分の」みたいに絞れる。

検索エンジンキーワードクエリ URL
eow.alc.co.jpalchttps://eow.alc.co.jp/%s/UTF-8/
caniuse.comcaniusehttps://caniuse.com/#search=%s
developer.mozilla.orgmdnhttps://developer.mozilla.org/search?q=%s
docs.python.orgpythonhttps://docs.python.org/3/search.html?q=%s
docs.ruby-lang.orgrubyhttps://docs.ruby-lang.org/ja/search/query:%s/
drive.google.comdrivehttps://drive.google.com/drive/search?q=%s
gist.github.comgisthttps://gist.github.com/search?q=user:yano3nora+%s
github.comgithubhttps://github.com/search?q=%s&ref=opensearch
cs.github.comcshttps://cs.github.com/?scopeName=おすきに&scope=owner%3Aゆーざめい+OR+org%3Aおーがないぜーしょん&q=%s
translate.google.comtranslatehttps://translate.google.com/?source=osdd&sl=auto&tl=auto&text=%s&op=translate
twitter.comtwitterhttps://twitter.com/search?q=%s
thesaurus.comthhttps://www.thesaurus.com/browse/%s

Gmail Shotrcuts

chrome only じゃないけど gmail のショートカット一覧 ... * => A, Shift + I, E で全部既読化してアーカイブ。

Chrome Devtools

Chrome DevTools
最高にわかるChromeデベロッパーツールの使い方(チートシート付き)
Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能

Chrome DevTools は、Google Chrome に組み込まれたウェブ開発用デバッグツールのセット。HTML/CSS/JSのデバッグ、サイトの反復処理、プロファイリングなど開発における様々な検証・デバッグに利用できる。 Ctrl + Shift + i か F12 で起動。

  • Command
    • Ctrl + Shift + P でコマンドパレット
  • Search
    • Ctrl + Shift + F で全体検索 ( 多分 Elements や Sources を探索してる )
  • Settings
    • F1 で設定画面がひらきます
  • Elements
    • HTML エレメントのレンダリング結果の確認・修正
    • CSS の適用結果 ( Computed ) の確認・修正
    • DOM を Listen しているイベントリスナの確認
  • Console
    • 主に JavaScript によるデバッグで使用
    • shift + enter でコンソール上で改行できるのでコード snippet の適当な実行もできる
  • Sources
    • JS ブレークポイントの設置 ( ポーズ / ステップ実行 / Callstack 確認 )
  • Network
    • HTTP Request / Response の監視やヘッダ／ボディ確認
    • キャッシュの無効化 ( Disable cache )
    • Preserve log を有効化すると画面遷移やリロードでログをクリアしなくなる
    • Disable cache でキャッシュを無視する
  • Performance
    • ブラウザパフォーマンスのプロファイリング
  • Memory
  • Application
    • Cache / Cookie / LocalStorage などの HTML5 API / Service Workers など
  • Security
  • Audits
    • デバイスモードの変更 ( Desktop / Mobile )
  • Device Toolbar
    • デバイス ( iOS / Android など ) の端末エミュレート
    • メディアクエリの確認
    • UserAgent の偽装
    • レンダリングエンジンなどは変わらないので注意

Console

// 普通の JavaScript
$('selector')                      // jQuery ライクなセレクタで要素を選択

// コンソール操作
$_                                 // 最後の計算結果を表示
$0                                 // コンソールで直近に操作したオブジェクト履歴(５個まで)
clear()                            // コンソールのクリア

// 要素の表示
copy(object)                       // 引数をクリップボードにコピー
dir(object)                        // 引数のプロパティを表示

// イベント関連
getEventListeners(object)          // 要素のイベントリスナ取得
monitorEvents(object[, events])    // 要素のイベント監視
unmonitorEvents(object[, events])  // イベント監視終了

// プロファイリング
profile([name])                    // CPU プロファイリング
profileEnd([name])                 // CPU プロファイリング終了

Tips

Performance Monitor

Cmd + Shift + P で command pallet 出して performance monitor って打って enter

FPS の確認

Cmd + Shift + P で command pallet 出して fps って打って enter

iOSブラウザのデバッグ

【簡単】サイトのiPhone表示をWindowsでデバッグする方法

UserAgent の偽装

Google ChromeでUserAgentを変更する

  1. メニュー ( 右上の : みたいなやつ )
  2. More Tools
  3. Network Conditions
  4. UserAgent の自動選択を解除
  5. 任意の端末を選択 → リロード

HTTP リクエストの記録 → POST 値チェック

  1. フォームのあるページを開く
  2. Developer tools を立ち上げる
  3. Network タブに切り替え
  4. Recording Network Log をクリック
  5. フォームに入力 → Submit
  6. Method 列で POST のある行をクリック
  7. Headers で送信されたデータを確認