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のリロードも同様にして実現できます。
今回は上記した③の開発者モードの立ち上げというところをソースコードで表現してみました。
ディスカッション
コメント一覧
まだ、コメントがありません