Google ChromeのDevToolsでChromiumをデバッグする方法

フォローする

概要

Google ChromeのDevToolsを使用してChromiumをデバッグする手順を以下に示します。

注意事項

・本手順はDS端末で実施する必要があります。
・Google ChromeのDevToolsでChromiumを確認する手順は手順4までの手順で完了となります。
・手順5以降はDevToolsの「console」タブでログを取得する手順となっておりますので、要件に合わせDevToolsの操作を変更して下さい。

作業手順

1.「cef.cfg」ファイルを開き「#chrome:remote-debugging-port = 9222」のコメントアウト(#)を削除する。

・設定変更ファイル
<Ver.10.3以前>
C:\Program Files\Kapow {バージョン}\nativelib\hub\windows-x32\{ID}\node_modules\cef\cef.cfg

<Ver.10.4以降>
C:\Program Files\Kofax RPA{バージョン}\nativelib\hub\windows-x32\{ID}\node_modules\cef\cef.cfg

※バージョンによってインストールフォルダの名称が異なる場合があります。
 詳細は以下をナレッジをご確認ください。
  参考:各バージョンのインストールフォルダ

・設定変更内容
<変更前>
# browser parameters should have prefix "chrome:"
#chrome:remote-debugging-port = 9222

<変更後>
# browser parameters should have prefix "chrome:"
chrome:remote-debugging-port = 9222

2. Google Chromeで「chrome://inspect」を開く
DS端末のGoogle Chromeで「chrome://inspect」を開き、以下が表示される事を確認してください。
inline-1776179029.png

3. Chromiumで最初のWebページを読み込む
手順2 のGoogle Chromeの画面を開いたまま、DSでChromiumを使うロボットを開き、Chromiumで最初に読み込むWebページを表示してください。

4. Chromiumで開いたWebサイトの「inspect」欄をクリックする
Google Chromeで以下の通り「Remote Target」に表示される、Chromiumで開いたWebサイトの「inspect」ボタンをクリックしてください。
※以下例では「Yahoo! JAPAN」を開いておりますが、Chromiumで操作するデバッグ対象のWebサイトを開いて手順を実施下さい。
inline1184811501.png

5. DevToolsウィンドウで「Console」を選択
「DevTools」ウィンドウが表示されますので、以下画像の右上にある「>>」ボタンから「Console」を選択してください。
inline-223298575.png

​6. Chromiumの問題発生箇所までロボットを実行
「DevTools」ウィンドウの「Console」タブが確認できましたら、Chromiumで問題が発生するまでロボットを実行してください。

7. 「Console」タブのログ取得
Chromiumで問題が発生しましたら、「DevTools」ウィンドウの「Console」タブの右側で「右クリック」ー「Save as…」をクリックし、ログファイルを保存してください。
inline-1043111229.png

 
補足

v10.7以降のバージョンでは、cef.cfgファイルにて、show_dev_toolsパラメータをtrueにすることで、
Chromiumで最初のWebページを読み込む際に自動的にDevToolsを起動することが可能となっております。

・設定変更内容

<変更前>

# set to true to open Chrome DevTools window attached to a browser window
show-dev-tools = false

<変更後>

# set to true to open Chrome DevTools window attached to a browser window
show-dev-tools = true

 
例:show-dev-tools = trueに設定し、v10.7のChromiumでWebページにアクセス
showDevTools.png

区分 確認Ver
手順 10.3.0.8、10.7.0.4