今回のテーマはChrome/Safari/Firefoxなどについているデバッグツールをさらに便利にしてくれるソフトウェアをまとめて紹介します。単純なコンソールだけでない使い方として参考に、そして開発生産性を高めてください。
便利な機能
サーバサイドのデバッグ
多数のプログラミング言語でDevToolsへメッセージを送れるライブラリが出ています。開発効率が大幅に向上するかは分かりませんが、ログファイルを見ずともブラウザだけで確認ができるのは便利そうです。
スマートフォンのデバッグ
iPhoneであればUSBケーブルで接続してSafariの開発メニューからデバッグができます。Androidの場合はweinreを使うのが一般的です(最新のChromeではUSBデバッグモードがサポートされます)。iPhoneのSafariはJavaScriptデバッグ機能がありますが、あの小さい画面ではなかなか難しいのでデスクトップからつなぐ方が良いでしょう。
スマートフォンアプリのデバッグ
PhoneGap/CordovaやTitaniumで作成したアプリのデバッグを行うことができます。特にPhoneGap/CordovaアプリはHTMLで書かれているのでSafariから接続して実際の内容を見ながらデバッグできるのが便利です。
デバイスモード
Google I/Oで新しく発表されたのがデバイスモードです。デバイスを選ぶだけで、そのデバイスに合わせた画面幅、解像度に変更ができます。モバイルならではの遅い回線をエミュレートすることもできます。
ワークスペース
あまり使われていないかも?と思うのがワークスペース機能です。フォルダを登録してローカルのファイルをChrome上で修正できます。ソースコードハイライトのテーマを入れておけば、そのままプログラミングエディタとして使えるレベルです。
この記事は過去記事の為、今入会しても読めません。ニコニコポイントでご購入下さい。