# AndroidのChromeでiPhone&SafariみたいにCSSのデバッグをする。

- リンク: https://torounit.com/blog/android%e3%81%aechrome%e3%81%a7iphonesafari%e3%81%bf%e3%81%9f%e3%81%84%e3%81%abcss%e3%81%ae%e3%83%87%e3%83%90%e3%83%83%e3%82%b0%e3%82%92%e3%81%99%e3%82%8b%e3%80%82/
- 公開日: 2013-12-10T09:30:11+09:00
- 作成者: Toro\_Unit

iPhone + SafariでCSSのデバッグなんかをよくやったりしますが、Androidにもあるよなぁー。
いちいちエミュレータとかいろいろ立ち上げてやるが嫌だなぁー。とか思っていたら、

[SDK不要Android端末のリモートデバッグChrome拡張機能「ADB」](http://iti.hatenablog.jp/entry/2013/11/05/182133)

こんなものがあるようです。

[⌊adb⌉⌊adb⌉[

こんな感じで、PCのChromeからデベロッパーツールを開いたり、AndroidのChromeを操作する
こともできます。

詳細な紹介は[元記事](http://iti.hatenablog.jp/entry/2013/11/05/182133)を参照して
ください。

[Chrome Web Store – ADB

をChromeにインストールするとPC側の準備完了。

## Android側端末の設定

これで使える！と思いきや、端末側も設定がいるようです。

まず、設定 -> 端末情報 -> ビルド番号を7回タップ。
 すると、「デベロッパーになりま
した」というメッセージが表示されますので、設定のトップページに戻ると、 「開発者向け
オプション」という項目が追加されています。その中の「USBデバッグ」を有効にします。

これで、AndroidをUSBでPCにつないでADBを起動すると、ブラウザからCSSいじったり、JS
いじったりできちゃいます！！

Androidのケーブルの抜き差しが多発するので、ケーブルがだめになったりコネクタを傷め
たりしないよう、優しく取り扱ってあげましょう。