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");