CefSharpで開発者ツール(Developer Tools)を立ち上げる方法

今回はCefSharpで開発者ツールを立ち上げる話。
githubのソースはこちら。

・JavaScriptでChromeと同じ動きになるはずなのに、何故か動きが違うので調査したい
・CefSharpを呼び出すためのスクリプトがどうなっているのかを調査したい

このような場合、開発者ツールがあれば調査も捗ります。

まずは開発者ツールを立ち上げるコードから

using System;
using System.Configuration;
using System.Windows.Forms;
using CefSharp;
using CefSharp.WinForms;

namespace WinFormsCefSharpSample
{
    public partial class FormOpenDevTools : Form
    {
        public FormOpenDevTools()
        {
            InitializeComponent();
            InitializeChromium();
        }
        private void Form1_FormClosing(object sender, FormClosingEventArgs e)
        {
            Cef.Shutdown();
        }

        public ChromiumWebBrowser chromeBrowser;
        public void InitializeChromium()
        {
            CefSettings settings = new CefSettings();
            // CefのInitializeは一度だけ
            if (!Cef.IsInitialized)
            {
                // Initialize cef with the provided settings
                Cef.Initialize(settings);
                // これを入れないと黒い余白が発生していまう。
                Cef.EnableHighDPISupport();
            }

            // Create a browser component
            chromeBrowser = new ChromiumWebBrowser("https://takumi-oda.com/blog/");
            // Add it to the form and fill it to the form window.
            this.Controls.Add(chromeBrowser);
            chromeBrowser.Dock = DockStyle.Fill;



            // DeveloperToolを立ち上げる。Initializeが終わった後に呼ぶ必要があるのでイベントにアタッチ
            bool parseRet = bool.TryParse(ConfigurationManager.AppSettings["isShowDevTool"], out bool isShowDevTool);
            if (parseRet && isShowDevTool)
            {
                chromeBrowser.IsBrowserInitializedChanged += ChromeBrowserOnIsBrowserInitializedChanged;
            }
        }

        private void ChromeBrowserOnIsBrowserInitializedChanged(object sender, EventArgs e)
        {
            var chromiumBrowser = sender as ChromiumWebBrowser;
            chromiumBrowser?.ShowDevTools();
        }
    }
}

46行目
chromeBrowser.IsBrowserInitializedChanged += ChromeBrowserOnIsBrowserInitializedChanged;
開発者ツールを立ち上げるためには、Initializeが終わってからにする必要があります。Initializeが終わった後に実行されるイベントにDevToolsを立ち上げるコードを仕込みます。

50-54行目

ChromiumWebBrowserの ShowDevTools()メソッドを呼び出す。
これで開発者ツールが立ち上がります。

CefSharpを使っていてもF12で開発者ツールは立ち上がらない。

ちなみに、通常のChromeだとF12を押せば開発者ツールが立ち上がりますが、CefSharpの場合は何も起こりません。
また、F5のリロードも効きません。ただし、開発者ツールが立ち上がった状態だとリロードが効きます。

CefSharpはあくまでForm上に乗っかっているだけなので、それらボタン押下のイベントを監視しているのはForm自体です。
したがって、F12で開発者モードを立ち上げたければ
①ボタン押下のイベントを監視して
②そのボタンがF12か判定
③F12キーなら開発者モードを立ち上げる
というようにする必要があります。
F5のリロードも同様にして実現できます。

今回は上記した③の開発者モードの立ち上げというところをソースコードで表現してみました。

C#C#, CefSharp

Posted by takumioda