2013年3月21日,
今回は
本稿では,
Chrome DevTools for beginners
Chromeの開発者ツールについてhtml5j.
Chromeの開発者ツールは,
まずは基本的な設定の方法をいくつか紹介しました。
ツールの左下にあるボタンをクリックか長押しすると,
ツールの右下にあるボタンをクリックすると,
Chromeの開発者ツールにはとても多くの機能がありますが,
ElementsパネルのHTML要素の上にマウスをのせると,
デバッグしたい要素を見つけた後は,
スタイルもHTMLと同様にリアルタイムに編集を行うことができます。数値の変更を行うときは上下キーで値を増減できますが,
- 「Shift」
キーを押しながらだと±10ずつ増減 - 「Alt」
キーを押しながらだと±0. 1ずつ増減
講演の終盤ではモバイルのデバッグ方法について紹介しました。
モバイルのデバッグには,
また,
- Chrome for Androidで動作
- Androidの開発環境
(Android SDK) をインストール - USBデバッグで接続
- コマンド実行
$> adb forward tcp:9222 local abstract:chrome_
devtools_ remote - Chromeでlocalhost:9222を表示
最後に,
本講演はビギナー向けでしたが,
Debug in Safari
続いてhtml5j.
Safariの開発ツールの使い方は概ねChromeと同じということで,
SafariではChromeの開発ツールと比較して,
- JS/
CSSの編集ができない - カラーピッカーが出ない
- minifyされたJSの展開ができない
- touchイベントがエミュレートできない
- 日本語が含まれると行番号がずれる
(CSSで修正可能)
以上のように,
しかし,
- スニペットエディタ
- iOS端末のリモートデバッグ
スニペットエディタとはHTMLのリアルタイムプレビューができるツールで,
また,
さらにデバッグや表示確認を行う際は,
講演の終盤ではSafariの隠されたデバッグツールについて言及しました。
ターミナル上で次のコマンドと実行すると,
defaults write com.apple.Safari IncludeInternalDebugMenu 1
これにより様々な統計情報の取得や,
まとめとして,