ESC で コンソールタブ以外で下部にコンソールを表示するESC で表示・非表示が切り替えられます。 リロードボタン右クリックでオプションメニュー ※ 長押しでも可
デベロッパーツールが開いている状態でのみ、メニューが表示されてリロード方法を選択できるようになります。特に、最後の『キャッシュの消去とハード再読み込み』は、ショートカットキーが無いのでこのメニューからのみ利用できます。 ドラッグ & ドロップで要素を移動
ドラッグで top_1 の div を移動中です。ドロップすると移動され、CTRL+Z で元に戻ります CSS のカラーフォーマットをその場で変更表示 カラー部分を、SHIFT を押しながらクリックすると、フォーマットが切り替わって循環します。
複数の ソース(js/css/html)より文字列検索
ソース(JS/CSS/HTML) の整形
ソースのスペースの表示 F1 で設定画面( preferences ページの Sources )
▼ スペース
▼ タブ
コンソールから関数のブレイクポイント作成 debug( 関数名 ) インスペクト直後のオブジェクト参照 $0 dir( $0 ) コンソールに表示された内容を右クリックして表示されるメニューから、要素タブの該当部分へ戻れます ( $0 でも dir($0) でもどちらでも )
console.log では、以下のフォーマット文字列が使えます console.log('%cBlue! %cRed!', 'color: blue;', 'color: red;'); のように複数も可
| 指定子 | 出力 |
|---|---|
| %s | 値を文字列としてフォーマットします。 |
| %i または %d | 値を整数としてフォーマットします。 |
| %f | 値を浮動小数点値としてフォーマットします。 |
| %o | 値を展開可能な DOM 要素としてフォーマットします。[Elements] パネルに表示されるフォーマットです。 |
| %O | 値を展開可能な JavaScript オブジェクトとしてフォーマットします。 |
| %c | 2 番目のパラメータで指定されたように出力文字列に CSS スタイルルールを適用します。 |
%c は、続く文字列に対してスタイルを適用するものなので、色や大きさ等いろいろな表現をコンソール上で行います この方法を使うと背景に画像を設定できるので、コンソールに画像を表示する事もできます。 ( ※ このページのコンソールで画像を表示しています )
console.log("%c%s","background: url('https://lh3.googleusercontent.com/-lpfmi9vuwOg/WDVegEds_SI/AAAAAAAAhxc/0DzXoBQQlJw_L7KXSIi2UY0hEJwjiNcHwCHM/s128/internet_kanki_woman1.png'); font-size: 1240px;"," ")
コンソールで IFRAME を選択 デフォルトでは、トップフレームなので IFRAME の中で作業したい場合に選択しますその他 コンソールでは、SHIFT+Enter で複数行可 エレメンツの HTML を F2 で編集 copy コマンド( コンソールのみ ) でクリップボードへコピー table コマンドと、console.table メソッド
このページの PDF
|
|
【Google Chromeの最新記事】
- Chrome ポリシー : レジストリ : ( ChatGPT 解説 )
- Google Chrome + Windows10 + PDF ビューア + 非埋込みフォント で正しいフォントが表示されない
- Google Chrome のみ動作する Data URLs を使用した『HTML/テキスト』変換アプリ
- Google Chrome のエディタ機能を使用してローカルにある HTML と JavaScript のソースでブレークポイントを使用したデバッグを行う手順
- Google Chrome のコンソールが、『いらすとや』のイラストでいっぱいになった日
- Google Chrome で IFRAME を display:none で消してから表示すると、スクロールバーが消える。仕方ないので、visibility:hidden で代替
- Google Chrome 45.0.2454.93m コンボボックスのバグ( リストボックスでは起こりません )
- Google Chrome のカラーピッカーを使用して、#RGB 形式の色コードを取得する方法
- Google Chrome の「デベロッパーツール」で、実行済みのページのソースをクリップボードにコピーする
- Auto-Translate(Chrome 拡張) が、Chromeウェブストアから削除されていました
- Google Chrome : デベロッパーツールの table コマンドで、オプジェクトのプロパティをテーブル表示して Excel に貼り付ける
- Google Chrome と Firefox : JavaScript : Pointer Lock API
- List of Chrome URLs( chrome://chrome-urls/ ) / Chrome の内部ページの一覧
- Google Chrome デベロッパーツールの新しい 『Mobile emulation』という機能
- 今、Google Chrome で WEBアプリをテストするには、デベロッパーツールを開いておいてキャッシュを無効にする必要があるのをご存知ですか?
- Google Chrome を強制終了すると、後で『開いていたページを復元』できますが、ログイン状態も復元してしまいます。
- Google Chrome 拡張の『instant translate』という翻訳機能の翻訳ウインドウを大きくする
- Chrome リモート デスクトップ。出先から自宅、出先から仕事場へのアクセスする為の環境と注意事項( 出先は拡張のみ )
- Google Chrome を一旦削除してやっと正常になった症状
- マウスカーソル下の画像表示用 HTML コードをクリップボードにコピーする Google Chrome 拡張
