IT Office Nishimiyahara

個人用スマホから商用プログラミングまでなんでもお任せ下さい

Chromeのデベロッパーツールが凄い

      2014/05/13

@nqounetです.

WindowsのHomeキーとEndキーが快適すぎて,Macで文字を打つのが辛いです.

またoptionキーとcommandキーを入れ替えようかと,考え中.

今日はChromeのデベロッパーツールに感動した話です.

ユーザーエージェントを詐称する

結果から.

デベロッパーツールのオプション(右下の歯車)を開いて「Overrides」の所で設定できる!

設定しているところ

デベロッパーツールを開くたびに有効になるようにしておくと便利ですね.

Chromeでユーザーを作って,そのユーザーでのアクセスはスマートフォン扱い,という風にして使っています.

Chromeのユーザーを増やす利点が最初はわからなかったのですが,まさに開発向けという感じです.

さて,ユーザーエージェントの詐称,というと色々と悪い感じですが,結構需要はあると思います.

拡張機能も色々とあったのですが,なんだかイマイチ感がありました.

もうちょっと気の利いた感じのはないのかと思っていたら,Chromeの(デベロッパーツールの)標準機能にあるというではありませんか!

なんということでしょう~.

これこれ,これです.こんな感じですよ.

なんというか,さすが本体の機能は別格な感じがしますね.

開発中は,ずっとこれを使っています.

HTTP通信を覗き見る

結果から.

HTTPで何を送受信しているのかを確認するのは,Chromeの標準機能(デベロッパーツール)で十分でした.

十分というより,状況が正しく把握できたので,より適切でした.

最近は,既存のサービスのスマートフォン対応をしています.

ただ,残念ながら,既存のサービスについて,しっかりとした仕様書がありません.

…まあ,よくある話ですね.

仕方ないので,本来はソースコードからパラメータを読み取るのがふさわしいのですが,実際の通信から読み解いていこう,という考えに至りました.

そこで,Chromeの拡張機能でhttpのヘッダ(送受信)を確認したり(HTTP Headers),通信のトレースをしたり(HTTP Trace),していたのですが,モバイル版でselectをmultipleにして複数選択した時に,最初の項目しかアプリケーションに渡っていない,という状況で躓いた.

「HTTP Trace」で見ていると,PC版と同じ項目を送信しているのです.

なので,何か特殊な仕様でもあるのかと思い既存システムを良く知る担当者に確認してみたのですが,フレームワークで自動的に値を取得しているだけで,そんな特殊な仕様ではありませんでした.

それで,責任者の方に訊いてみると,どれどれ…という感じで,デベロッパーツールのNetworkを開いて,POSTしているPATHを選択して,Headersを見ているではありませんか!

見ているところ

リクエストもレスポンスもフォームデータも丸見えですよ.

拡張機能なんて要らんかったんや.

そこで比べてみると,PC版は複数の値をカンマで区切って連結させていたのでした.

私が作っていた方は,jQueryMobileで作ったフォームそのままだったので,項目と値を複数回送っていました.

「HTTP Trace」はその状態をわかりやすいように解釈して見せてくれていたのです.

確かにわかりやすいですよ.

しかし,まさかフォームの送信データが原因だったなんて.

というか,フレームワークってそういう所には対応してないのか….

ともかく,原因はわかったので,送信する前にデータを整えて,余分なデータは消して送信することにしました.

めでたしめでたし.

クッキーを消したい

結果から.

デベロッパーツールのResourcesのCookiesで全部丸見えですし,項目ごとに削除できます.

全部消すのも簡単.

選んで消すこともできる.

これ以上何が必要ですか?

…まあ,さすがに編集は出来ないようなので,クッキーを編集する拡張機能は有用かもしれません.

編集する場合は「Edit This Cookie」という拡張機能を使うと良さそうですね.

ただ,あまり活躍してません.

まとめ

Googleは凄いね.

ブラウザはChromeだけで良いと思います.

…まあ,Firefoxも使ってますよ.

respo

respo link

ZenBackWidget

 - 情報技術について ,