SQLの窓

2014年09月27日


Google Chrome デベロッパーツールの Tips And Tricks

リロードボタン長押しでオプションメニュー



デベロッパーツールが開いている状態でのみ、メニューが表示されてリロード方法を選択できるようになります。特に、最後の『キャッシュの消去とハード再読み込み』は、ショートカットキーが無いのでこのメニューからのみ利用できます。

ドラッグ & ドロップで要素を移動



ドラッグで top_1 の div を移動中です。ドロップすると移動され、CTRL+Z で元に戻ります

CSS のカラーフォーマットをその場で変更表示

カラー部分を、SHIFT を押しながらクリックすると、フォーマットが切り替わって循環します。

複数の JavaScript ソースより文字列検索



JavaScript の整形



ソースのスペースの表示



▼ スペース


▼ タブ


コンソールから関数のブレイクポイント作成

debug( 関数名 )

インスペクト直後のオブジェクト参照

$0

dir( $0 )

表示された内容を右クリックして表示されるメニューから、要素タブの該当部分へ戻れます

console.log では、以下のフォーマット文字列が使えます

console.log('%cBlue! %cRed!', 'color: blue;', 'color: red;'); のように複数も可
Format SpecifierDescription
%sFormats the value as a string.
%d or %iFormats the value as an integer.
%fFormats the value as a floating point value.
%oFormats the value as an expandable DOM element (as in the Elements panel).
%OFormats the value as an expandable JavaScript object.
%cFormats the output string according to CSS styles you provide.
コンソールで IFRAME を選択

デフォルトでは、トップフレームなので IFRAME の中で作業したい場合に選択します



モバイルモード『Mobile emulation』で左上にフィットする



その他

コンソールでは、SHIFT+Enter で複数行可

copy コマンド( コンソールのみ ) でクリップボードへコピー

table コマンドと、console.table メソッド




タグ:Google Chrome
【Google Chromeの最新記事】
posted by lightbox at 2014-09-27 18:09 | Google Chrome | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
PHP正規表現チェッカー
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり