chrome://discards/ から開いているタブのアンロード状態を管理できる。
- 縮小 / 拡大
Cmd + -/Cmd + Shift + - - タブ移動
Cmd + 1, 2, 3... - 新しいタブ
Cmd + T - 擬似的な「タブの複製」
Cmd + l→Cmd + Shift + Enter - シークレットウィンドウ
Cmd + Shift + N - タブ検索
Cmd + Shift + A - カーソルブラウジング
F7 - ブラウザデータの削除
Cmd + Shift + Backspaceで削除画面へ
設定 chrome://settings/
- 同期と Google サービス chrome://settings/syncSetup
検索語句や URL をオートコンプリートOFF (よくある語句 suggest 消す)
- 履歴リスト chrome://history/
- 履歴削除 chrome://settings/clearBrowserData
- 検索エンジンの管理 chrome://settings/searchEngines
- 拡張機能 chrome://extensions/
検索エンジンの管理 chrome://settings/searchEngines > その他の検索エンジン
【Chrome】アドレスバーからGoogle以外の検索エンジンで素早く検索する
caniuse.com内の検索 ... など、独自検索エンジンを追加できる- クエリ URL にて、その Web サイト独自の検索クエリを
%sに検索文字が入る感じで設定 - あとは検索バーで、キーワード入力 => tab で検索できる
よく使うやつ登録しとくと鬼便利。あと gist とかはクエリを工夫して「自分の」みたいに絞れる。
| 検索エンジン | キーワード | クエリ URL |
|---|---|---|
| eow.alc.co.jp | alc | https://eow.alc.co.jp/%s/UTF-8/ |
| caniuse.com | caniuse | https://caniuse.com/#search=%s |
| developer.mozilla.org | mdn | https://developer.mozilla.org/search?q=%s |
| docs.python.org | python | https://docs.python.org/3/search.html?q=%s |
| docs.ruby-lang.org | ruby | https://docs.ruby-lang.org/ja/search/query:%s/ |
| drive.google.com | drive | https://drive.google.com/drive/search?q=%s |
| gist.github.com | gist | https://gist.github.com/search?q=user:yano3nora+%s |
| github.com | github | https://github.com/search?q=%s&ref=opensearch |
| cs.github.com | cs | https://cs.github.com/?scopeName=おすきに&scope=owner%3Aゆーざめい+OR+org%3Aおーがないぜーしょん&q=%s |
| translate.google.com | translate | https://translate.google.com/?source=osdd&sl=auto&tl=auto&text=%s&op=translate |
| twitter.com | https://twitter.com/search?q=%s |
|
| thesaurus.com | th | https://www.thesaurus.com/browse/%s |
chrome only じゃないけど gmail のショートカット一覧 ... * => A, Shift + I, E で全部既読化してアーカイブ。
- ショートカットキーを使ってGmailをもっと便利に使いこなす方法
- Gmailのショートカットキーで仕事効率が爆上がり
- メールの移動
J / K - チェック
X - メール読む
Enter - 全件選択
* => A - アーカイブ
E - 既読化
Shift + I
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 の偽装
- レンダリングエンジンなどは変わらないので注意
- コンソールから JavaScript による各種操作が実行できる
- コンソールログの内容をファイルに出力することも可能
- 時刻を表示させるやつ
// 普通の JavaScript
$('selector') // jQuery ライクなセレクタで要素を選択
// コンソール操作
$_ // 最後の計算結果を表示
$0 // コンソールで直近に操作したオブジェクト履歴(５個まで)
clear() // コンソールのクリア
// 要素の表示
copy(object) // 引数をクリップボードにコピー
dir(object) // 引数のプロパティを表示
// イベント関連
getEventListeners(object) // 要素のイベントリスナ取得
monitorEvents(object[, events]) // 要素のイベント監視
unmonitorEvents(object[, events]) // イベント監視終了
// プロファイリング
profile([name]) // CPU プロファイリング
profileEnd([name]) // CPU プロファイリング終了Cmd + Shift + P で command pallet 出して performance monitor って打って enter
Cmd + Shift + P で command pallet 出して fps って打って enter
- メニュー ( 右上の : みたいなやつ )
- More Tools
- Network Conditions
- UserAgent の自動選択を解除
- 任意の端末を選択 → リロード
- フォームのあるページを開く
- Developer tools を立ち上げる
- Network タブに切り替え
- Recording Network Log をクリック
- フォームに入力 → Submit
- Method 列で POST のある行をクリック
- Headers で送信されたデータを確認