使用 CefSharp 在開發應用程式的過程當中，絕對跑不掉有需要偵錯前端程式碼的時候，但是 F5 按下去，只有辦法偵錯 C# 的程式碼，那前端的程式碼該如何偵錯？這篇文章就來介紹兩種在 CefSharp 開啟偵錯模式的方式。
不了解 CefSharp 是做什麼用的朋友，可以參考我先前寫的兩篇文章：
- [食譜好菜] CefSharp 把 Google Chrome 的核心 Chromium 變成了 WinForms/WPF 的控制項
- [食譜好菜] CefSharp 在 JavaScript 與 .NET 之間互相呼叫方法並且傳遞參數及回傳值
CefSharp 依賴 Chromium 瀏覽器，而 Chromium 瀏覽器要偵錯，使用 DevTools 是最為方便的，所以與其說是開啟偵錯的方式，不如說是開啟 DevTools 的方式。
第一種：RemoteDebuggingPort
第一種是設定 RemoteDebuggingPort 的屬性值，通常是 8088，而我的範例是設定為 7077。
接著在程式啟動之後，打開瀏覽器，沒聽錯，就是打開瀏覽器輸入 http://localhost:{剛剛設定的埠號}，然後點擊 Document。
這時候我們就會看到我們製作的網頁被開啟來了，然後 DevTools 也跟著打開了，只是我們可能會覺得網頁被執行在一個像是平板裝置的樣子，而不是我們的應用程式上。
第二種：ShowDevTools()
第二種是我比較推薦的方式，雖然它要寫一點程式碼，但是它顯示 DevTools 的方式跟我平常的開發習慣比較相符。
我們先註冊 ChromiumWebBrowser.IsBrowserInitializedChanged 事件方法，然後在這個事件被觸發的時候，執行 ChromiumWebBrowser.ShowDevTools();，也可以視需求加上條件式編譯，只有在 DEBUG 組態才會出現 DevTools。
程式啟動之後，可以看到 DevTools 是用另開視窗的方法被執行起來，而且該有的功能都有。
CefSharp 或許沒有多少朋友在用，使用者也算是小眾的，不過它在特定的情境上，真是一個好用的套件，以上，在 CefSharp 開啟偵錯工具的方式就分享給有在用的朋友，希望有幫助到。
