Tag Archives: chrome

AndroidのchromeのコンソールをAndroid Studioを使って見る

AndroidのchromeではConsole.logなどの出力は見れない。Android studio付属のエミュレータを使ってデスクトップのchromeから見ることができる。

Android Studioからエミュレータを起動

Launch Emulator

エミュレータのchromeで対象のページを開く

Chrome on Emulator

デスクトップのchromeで chrome://inspect/#devices を開く

chrome://inspect/#devices を開いて暫く待つと以下のように接続されるので、URLを確認して inspect をクリックする。

Desktop Chrome


DevToolsが開く。スクリプトのデバッグなどもできる。

vmwareのchromeでポップアップウインドウが見えないのでgpuを無効にする

vmwareのゲストでGPU(ハードウェアアクセラレーション)を有効にしていると、chromeでポップアップウインドウがうまく表示できない。(以下の図のユーザー名サジェストが白くなっている部分)

chromeはデフォルトでGPUを使って描画しているので、これを無効にすればちゃんと表示できる。

設定で無効にする

  1. chromeを起動し、右上のメニューから「設定」を選択。
  2. 左側のメニューの「詳細設定」をクリックしてから、「システム」をクリック
  3. ハードウェア アクセラレーションが使用可能な場合は使用する」をOFFにする

コマンドライン引数で無効にする

コマンドラインで”--disable-gpu“をつけると、GPUを無効にできる。

無効にされているか確認

chromeでオムニバー(アドレスバー)に”chrome:gpu“と入力すると以下のように確認できる。以下は有効のとき

以下は無効の時

CORSが難しい

CORSはクロスサイト間のリソース管理。Javascriptから他のサイトのリソース取得を管理するためのプロトコル。

通常こういったクロスオリジンのアクセスは許されないが(ブラウザが許さない)サーバがあるhttpヘッダを返すことで許すことができる。

Access-Control-Allow-Origin

このヘッダを付けることで、クライアントはその値と自分のJSのサイトが一致していたら通信を許可する。.htaccessに以下のように記述すると、すべてのクロスオリジンアクセスを許す。

制限

通常は完全にアクセスを許すことはしたくないはずなので自分のサイトだけを登録するが、サイトが複数ある場合はデバッグ中のlocalhostを加えたい場合は面倒なことになる。

更にサイトがディレクトリを掘っていて、ディレクトリごとに.htaccessがある場合とかだっともっと複雑になる。

サイトが複数ある場合

とりあえず動いているものとして、以下の.htaccess。

これはlocalhostとtango.dip.jpを許可する。返されるヘッダにはアクセス元のサイトのみが返るのだと思われる。

仕様によると以下の記述でもいいらしい。(試していない)

メソッド

上記の.htaccessにはメソッドの記述もあるが、これは許すメソッドを定義しているものと思われる。そのためにブラウザはOPTIONメソッドでリクエストしてこの情報を得るものと思われる。このときのURLはサイトのURLと同じと思われるので、PHPなどが動くときは200が返るようにしておかないと、Chromeなどはエラーを出す。OPTIONのときはPHPの$_POSTがないと思われるので、このとき500とかを返すとCORSがうまくいかない。

ChromeなどのエラーResponse to preflight request doesn’t pass access control checkはこのOPTIONを指しているものと思われる。

このように非常に面倒で、ヘッダとかを調べるのも面倒なので適当に書いた。ヘッダを確認するにはChromeのDEVTOOLSを使うといい。304になってしまう場合は、シフトキーを押しながらリロードするか、リロードボタンで右クリックして、ハードリロードなどを選ぶ。タイプコラムがxhrになっているのがスクリプトからのアクセス。

ChromeのDevToolでCORSを調べる