第37回HTML5とか勉強会に参加して参りました。今回のテーマは「ビギナー向けデバッグツール特集」です。開発効率がアップする情報があるかと思います。今回のレポートでは目についたところや、それぞれの違いや特徴を主にまとめています。Buildいきなりですが、最新機能をモリモリ搭載したChromeです。下記など恥ずかしながら、ショートカットを全然知らなかったです。他にもショートカットがたくさんありました。Androidを使ったリモートデバッグも便利そうです。Editのように編集できない。CSS編集時にカラーピッカーが出ない。minifyされたJSファイルの展開ができない。日本語があると行番号がずれるというバグ*1が有る。JSのデバッグには致命的。そんなバグにも解決方法があるようです。定食屋おろポンSafariのいいところスニペットエディタリアルタイムでHTMLの編集とプレビューができる。iOSシミュレータiOSのSafariを再現(バグも再現)する。OSバージョン、画面解像度がある程度選べる。スクリーンショットとれるし確認しやすい。Debugメニュー追加ターミナルから下記を実行します。Windowページ内のキャッシュ状況表示する。Flagschrome://falgs的な設定変更が可能になる。FlagsGPU関連の設定が可能になる。BordersGPUによる描画の境界線の表示(これはChromeにもある)する。描画の更新回数が表示される(ここがSafariならでは)。JS/CSSのデバッグには他のブラウザがオススメです。iOS端末のデバッグには強力で、iOSシミュレータとの併用でさらに快適なデバッグが可能になります。)UIもエラーメッセージも日本語で表示されるし、CSSプロパティ横の(?)ボタンを押すと、MDNの解説ページが見れる、真面目な日本人にも優しいブラウザFirefoxの紹介です。開発者ツールといえばこれ!「3Dビュー」!!浅井さんからも「テクノロジーの無駄遣い」なんて言葉がありましたが、そんな機能を使ってさらにテクノロジーの無駄遣いをしているページの紹介がありました。開発者ツールで3Dビューにしてご覧下さい。コマンドラインで各種操作ができる機能も持っています。CUI使いはぜひ一度触ってみてください。16」のコマンドラインを使ってみた。するという試みがされているようです。できるようになると、非常に捗りそうで憧れます。OSですが、Firefoxのプラグインとしてシミュレータを出しています。いう開発になりそうです。Marketplace」が用意されています。範囲選択した部分だけなど、コードの一部を実行して検証できます。Ajaxリクエストを用いるようなサイトで、スクリプトの部品ごとの検証などに非常に役立ちそうです。)IEでデバッグしたことがあまりないので、知らないことがたくさんありました。されたスクリプトも展開できるし、スクリプトのオブジェクトの状態監視や、プロファイラなど開発者ツール的なものは実装されていました。知らなくてごめんなさい...。Developer」のような、ルーラやイメージレポートを表示する機能なども搭載されているので、標準機能は充実しているのかなと思いました。Inspect」の紹介です。Cloudのメンバー登録が必要です。使える機能に制限があるものもありますが、無償メンバーも利用可です。ReflowレスポンシブWebデザインをコーディングせずに実現できます。Queriesを使ったり)を行なってくれるので、見たままを即コードにしてくれます。Inspectとの連携によって、さらに開発効率がアップします。使っていますが、他のブラウザの開発者ツールも特徴があって面白いです。開発者ツールは見た目もカッコイイなんて思ったりします。抱き合わせのようなイメージです。開発場面ごとの連携が非常に強力なので、使いこなせば開発効率は非常に高まる予感です。