@nqounetです．

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

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

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

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

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

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

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

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

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

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

なんということでしょう～．

これこれ，これです．こんな感じですよ．

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

開発中は，ずっとこれを使っています．

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」という拡張機能を使うと良さそうですね．

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

…まあ，Firefoxも使ってますよ．