#経緯
諸事情によりキオスクモードのGoogleChromeをDeveloper Toolsでデバッグしようと思ったところ、
キオスクモードの目的考えれば当然なのですが、F12でDeveloper Toolsが立ち上がらなかったのであーだこーだした記録です。
#キオスクモードの立ち上げ方
これ見に来ている時点でわざわざ書く必要はないとは思いますが、こんな感じでキオスクモードは立ち上がります。
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --kiosk https://qiita.com/ --user-data-dir="%UserProfile%\Documents\Chrome User Data"
--kioskが、キオスクモードの指定です。
すでに別でChromeが立ち上がっている場合、それに引きずられてキオスクモードで立ち上がらなくなってしまうので、
その場合はユーザーデータを切り替えます。取り合えず単品で動かせる場合は不要です。
--user-data-dir="%UserProfile%\Documents\Chrome User Data"
※Chromeの場所やユーザーデータフォルダの場所は適宜変更して下さい。
#キオスクモードでのデバッグツールの利用方法
ここからが本題で、キオスクモード時はF12でDeveloper Toolsを立ち上げられません。
このため、Chromeの機能であるリモートデバッグを利用します。本来は、Android端末などを遠隔でデバッグしたい場合に使う機能です。
キオスクモード起動時に、以下のオプションを追加します。
--remote-debugging-port=9222
その後、以下のURLに別で起動したChromeでアクセスします。
chrome://inspect/#devices
ここで、キオスクモードのChromeしか立ち上げていないと、逆にキオスクモードに引きずられるので、適宜どちらかのユーザーデータフォルダを変えてください。
Remote Targetという欄に、キオスクモードで開いたURLが表示されるので、その下にある「inspect」というリンクをクリックします。
すると、現在キオスクモードで表示している画面のDeveloper Toolsが表示されます。
ここまで来ればいつも通りのデバッグが可能です。
#おまけ
キオスクモードをデバッグしたい場合、基本的にはデュアルディスプレイで作業をしていると思います。
その際にキオスクモードの画面をどちらか望んだ方に出したいケースがあると思います。
その場合は、まず、キオスクモードなし、ユーザーデータフォルダ指定でChromeを立ち上げた後、
出したいディスプレイの方に表示されたChromeを移動させ、最大化した後でChromeを閉じてください。
その後立ち上げると最後に閉じたディスプレイ側でキオスクモードが立ち上がるようになります。
#参考にしたページ
https://developer.mozilla.org/ja/docs/Tools/Remote_Debugging/Chrome_Desktop