Tricks of Chrome Devtools(継続更新)

Tips and Tricks(小技)
コンサート・ソロ(コンソール)
複数行のコマンドを実行Shift+Enterは、コンソールに複数行の入力を許可します.
複数行のjavascriptプログラムを作成します.
複数行のjavascriptプログラムを作成します.
Snippetsはマルチラインコードの持続的な使用方法についてもっと理解しています.この機能は、カスタムjavascriptセグメントを実行し、DevToolsに格納することができます.
要素審査を開始するショートカットCtrl+Shift+CまたはCmd+Shift+Cは、要素のパターンを素早く起動するDevToolsを検査する.
審査要素の高速起動モード
もっと多いのはConsolie〓Devtools Docに関してです.
consone.tableコマンドをサポートします.
以下のように使います

console.table([{a:1, b:2, c:3}, {a:"foo", b:false, c:undefined}]);
console.table([[1,2,3], [2,3,4]]);

consolie.tableコマンド
もう一つのオプションcolumnsパラメータがあり、出力する列を選択します.以下のとおりです

function Person(firstName, lastName, age) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.age = age;
}

var family = {};
family.mother = new Person("Susan", "Doyle", 32);
family.father = new Person("John", "Doyle", 33);
family.daughter = new Person("Lily", "Doyle", 5);
family.son = new Person("Mike", "Doyle", 8);

console.table(family, ["firstName", "lastName", "age"]);

consolie.tableコマンド
前の二列だけ出力したいなら、いいです.

console.table(family, ["firstName", "lastName"]);

操作卓で印刷されたオブジェクトのプレビュー
印刷されたオブジェクトのプレビューはそのまま使用できます.別の作業は必要ありません.
印刷されたオブジェクトをプレビューします.
複数のパラメータを転送してログを印刷するスタイルを制御します.%cを通じてあなたのコンソールログにスタイルを追加することができます.まるであなたがFirebugでできるように.例えば:

console.log('%cBlue! %cRed!', 'color: blue;', 'color: red;');

クッシンのコンソール日誌ですね.
More:Style Cosolie Logging In The DevTools|G+
コンソールの履歴をクリアするショートカットキーCtrl+L and Cmd+Lショートカットキー.shell中clear()コマンドでも良いです.javascriptの中のconsone.clearもいいです.
キーボードマンをしますDevtoolsがフォーカスをオンにしたとき、Shift+?コマンドは設定パネルを開けてください.選択shortcutsはすべての利用可能なショートカットを見ることができます.
ショートカットの表示
コンソールからの迅速な選択要素
Select an element and type 0 in the consone,it will be used by the script.If You have jQuery on the page,you can then useドル($0)reto elect the element the in the page.
要素を素早く選択
You can also light click on any element output to the consolie and click'Reveal in Elements Panel'to find it in the DOM.
要素を素早く選択
XPS表現でDOMを選択します.
XPTah is a query laggage for selecting nodes from documents and generary returns a node-set,string,bolean or number.You can use Xboxpression to query the DOM from the DevTools JavaScript sone.sone.
The$x(xpath)command will allow you to execute a query-see below for an example of how to search for the margs in a page using$x('/img):
XPTathを使って元素を選択します.
However,the function also accepts an optional second argment for the path context-i.e$x(xpath,context).This lets select a specific context(e.g an frame)and run XPTaquery against.

var frame = document.getElementsByTagName('iframe')[0].contentWindow.document.body;
$x('//'img, frame);

which queries the margs within the specified frame.
コンソールの最後の出力を得た結果$_を使用して、コンソールの最後の出力の結果を得る.
コンソールの最後の出力を得た結果
consone.dir()
consolie.dirから提供されるコマンドは、JavaScriptオブジェクトのすべての属性を列挙することができる.
consone.dir()
指定されたiframeでコンソール内命令を実行します.
Along the bottom bar of the DevTools ardrop-down optitionthththatchangedepending on the contexof your current tab.When you're the Cosososole panel,there’s a drop-dowththallowws to selectthe selectthe the fframe the frame the frame the fframe the the frararame conconconconconconconconconconconconconconconconconconconconthththththththththththththththththththththththththththththththththththththththththththththtext in no time.
指定されたiframeでコンソール中命を実行します.
ブラウザが別のページに切り替わるときは、コンソールの履歴を保存します.
コンソールボードの右ボタンでsaveを選択すればいいです.
コンソールの履歴を保存
consone.time()とconsone.timeEnd()console.time()およびconsole.timeEnd()は、プログラムの実行時間を計算してもよい.
consone.time()とconsone.timeEnd()
consone.profileとconsone.profileEnd()
DevToolsが開くと、console.profile() JavaScript CPUの分析を呼び出します.console.profileEnd()は今回の分析を終了する.以下のとおりです
consone.profileとconsone.profileEnd()
各分析はProfilesパネルおよび‘consolie.profilses’に追加される:
consone.profileとconsone.profileEnd()
consone.profileとconsone.profileEnd()
*もっとコンソールを使う技術はusing the consone*:

Consoliアプリ

Command Line App

using the consone
Elements
尺を開ける
Devtools Settings>General>Show rulersを開けばいいです.
Show rulers
css属性の自動補完
css
css
css
カラーセレクタ
Devtoolsで色をクリックすると色セレクタを呼び出すことができます.shift+'click'で色のスタイルを変えることができます.
css
CSSスタイルを追加
Elementsパネルで要素をドラッグします.
Elementsでドラッグした要素は、文書の流れにおける未知の要素と表示のスタイルを変更できます.
Elementsパネルで要素をドラッグします.
元素の状態を変える

Right click on a child element and select'Inspect Element'

In the Elements panel right-click the parent element and chose「Force Element State」

You can now chose one of:active、:hover、:focus or:visited to force the element into one of these states.

元素の状態を変える
lessまたはsassコードをデバッグします.Settings>General>Sources>Enable CSS source mapsenable source
＊スタイルとDOM操作のテクニックについては、Editing Stylas And The DOM*がもっと多いです.
dom and style
Timeline