Google Chrome の 開発者ツールの使い方


https://developers.google.com/web/tools/chrome-devtools/?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3

Mobile Mode

https://developers.google.com/web/tools/chrome-devtools/device-mode/emulate-mobile-viewports

モバイルモードにした際に、右上のメニューから追加で様々な設定が可能。

デバイス風

メディアクエリの分岐点

クリックすると、その幅になってチェックもできる。

ルーラー

位置情報とデバイスの傾き

https://developers.google.com/web/tools/chrome-devtools/device-mode/device-input-and-sensors

CSS DOM 周り

https://developers.google.com/web/tools/chrome-devtools/css/

いつも使っているものなので省略。

Console

https://developers.google.com/web/tools/chrome-devtools/console/

コンソールの内容を消す

  • Right-click in the Console and press Clear console.
  • Type clear() in the Console.
  • Call console.clear() from within your JavaScript code.
  • Type Ctrl+L (Mac, Windows, Linux).

履歴をブラウザをリフレッシュしても残す

コンソールメッセージを右クリックで開いて保存できる。

log をグループ化

var user = “jsmith”, authenticated = false;
console.group(“Authentication phase”);
console.log(“Authenticating user ‘%s'”, user);
// authentication code here…
if (!authenticated) {
console.log(“User ‘%s’ not authenticated.”, user)
}
console.groupEnd();

階層化もできる

var user = "jsmith", authenticated = true, authorized = true;
// Top-level group
console.group("Authenticating user '%s'", user);
if (authenticated) {
    console.log("User '%s' was authenticated", user);
    // Start nested group
    console.group("Authorizing user '%s'", user);
    if (authorized) {
        console.log("User '%s' was authorized.", user);
    }
    // End nested group
    console.groupEnd();
}
// End top-level group
console.groupEnd();
console.log("A group-less log trace.");

groupEnd した時に表示

console.groupCollapsed("Authenticating user '%s'", user);
if (authenticated) {
    ...
}
console.groupEnd();

条件によって表示を分岐

first argument が true の時だけ実行。

console.assert(list.childNodes.length <= 500, "Node count is > 500");

 

Leave a Reply

Your email address will not be published. Required fields are marked *