Android以前、こんなエントリーを書いていたのですが、いつの間にか、使い方が結構変わっていたので、またまとめておきます。Androidとは、PCと接続したAndroid端末で、現在表示中のChromeブラウザのページ要素を解析したりするときに使う、WEBページやWEBアプリ製作者向けの機能です。この機能が便利なのですが、あまり周りで使っている人の話を聞かない(私の周りにWEB関連の開発者が少なすぎる、というだけかもしれませんが)ので、使い方をまとめたのが約半年前に書いたこのエントリーでした。私の場合はWEBサイトの開発は主要業務ではないため、それほどこまめに端末上のページソースをチェックしないこともあって、しばらく使っていなかったのですが、先日、久しぶりにタブレット版のWEBサイトのソースをチェックしようと開こうとしたら使い方が結構変わっていたのでそのまとめをしておきます。本家の解説ページのURLは変わっていません。https://developers.google.com/chrome-developer-tools/docs/remote-debugging?hl=jaそして前提条件も以前と変わらず・PCにAndroidSDKがインストールされている事。・PCとタブレットの両方で、Chromeが使える事。・タブレット端末がUSBでバッギングモードが利用でき、PCに端末のドライバがインストールされている事。前回も紹介しましたが、アプリ開発者でない人は、AndroidStudioをPCにインストールすればOKだと思います。変更された使い方を見ていきます。(以下、画像はすべてWindows7およびNexus7の物です。端末や環境によって、メニュー項目が若干異なるかもしれません)ADBのインストールなどは終わっているものとみなしますので、本家サイトのこちらの項目からの説明とお考えください。タブレットまたはスマートフォン(以下、「端末」)の「設定」を開き、「開発者向けオプション」→「USBデバッグ」にチェックを入れます。「USBでパソコンに接続」を確認し「メディアデバイス」になっている方は「カメラ」を選択してください。]と入力して、実行します。実行結果に、自分の端末番号と「device」というリストが1行(複数台の端末をつないでいる場合は複数行)表示されれば準備完了です。(この時、端末上に「USBデバッグを許可しますか」と問い合わせが表示される場合があります。このダイアログが表示された場合は「OK」をタップしてください。(端末側ではありませんのでご注意ください。)すると、次のような見慣れない画面が表示されます。タイトルにかなり強めの警告が表示されていますが、ここは開発者として恐れず、先に進みましょう。私が始めに戸惑ったのはこの画面の項目でした。日本語版のChromeを使っていると、このページ自体は上の図のように日本語で表示してくれます。先ほどから確認している本家の解説サイトは英語しかないうえ、解説画像も英語。おまけに、Chromeのページ自動翻訳機能を使った場合、実際に表示されている日本語のページとは似ても似つかぬ日本語にしか翻訳されません...。いうことで、これならいっそのこと英語のままにしておいてくれればいいのに、といった具合で戸惑いました。該当項目を探しましょう。experiments」という項目を探すように書かれています。端末上は日本語で標記されているため、これがなんという名前の項目なのかがわかりません。見ると、日本語で書かれている方も各項目の最後についている「#」以降のタグは英語で書かれているようです。いうことで、解説ページにある項目名ではなく、項目の最後に書かれているタグ「#enable-devtools-experiments」を頼りに、ページ上で該当項目を探します。]と入力すれば見つかるはずです。日本語名は「デベロッパーツールのテストを有効にする」という項目になっているようです。初期状態ではこの項目が灰色に反転しているため、項目下段にある「有効にする」のリンクをクリックし、項目を有効にします。すると、灰色の反転が解除され、画面下部に「変更内容は次にGoogleChromeを再起動したときに有効になります」というメッセージが表示されるので「今すぐ再起動」をクリックします。現在表示しているタブなどの情報は基本的にそのまま保持されますので、(何か入力中の物は保存しておいた方がいいかと思いますが)すぐに再起動をしましょう。これで、PCのChromeでデベロッパーツールが使えるようになりました。Enterキーを押して決定すると、自動的に「chrome://inspect」というURL表記に変わり、現在接続されている端末の一覧が表示されます。この時、端末名の下には、現在、端末のChrome上で開いているタブの一覧が表示されていますので、このリストの中の「inspect」をクリックすると、次のような画面が表示され、現在端末で表示しているページのソースや要素を確認することが出来ます。(本家の解説ページでは、この画面上でポートフォワード関連の設定がもうひと手間必要、ということで書かれているのですが、私の環境ではこの手順は不要でした。ADBをすでに使っていた関係からか、この端末が仕事場のPCで一度この手順の設定をしてしまったからか、またはChromeがアップデートされ、解説ページと手順が微妙に変わっているのかは不明ですが、もし、「inspect」をクリックすることが出来なかったり、表示されていなかった場合は、解説ページの手順に従って操作してみてください。)もちろん、PC版Chromeの「要素を検証」機能と同じで、PC上に表示されているソース画面でマウスやカーソルを合わせた個所を、端末画面上で枠で囲んで表示してくれます。Androidの使い方の紹介でした。ちなみに、この機能の途中で表示された隠しページのような「about:flags」ページをよく見ると、他にもいろいろと興味深そうな機能が、現在開発中のようです。興味のある方はそちらを調べてみるのも一興かもしれません。