How can one debug the Chrome extension "options" page using the new OptionsV2 method?

Question

https://developer.chrome.com/extensions/optionsV2 tells me that I should be using options_ui in my manifest, rather than options_page, and recommends I start upgrading immediately.

However, I can't find any way to actually debug the script run by my options page when I use options_ui—the Options popup is in an tag, and the developer tools don't show me the source, or even the HTML content.

For now, I just comment out options_ui and let options_page take effect when I need to debug. I'm guessing that setting "options_ui": {"open_in_tab": true,...} would have the same effect, but it would be really nice to figure out how to actually debug the script when it's running the new way.

Answer 1

Auspex,

Teepeemm's comment is correct.

Other way, you can launch your options page from other tab using its full URL like,

chrome-extension://{your extension id here}/{your options page path here, from the extension root}

e.g. say my extension id aaabbbcccdddeeefffggg, and say, my options page is located (from extension root) at app/html/options.html; then i can load up below URL in a new tab ---

chrome-extension://aaabbbcccdddeeefffggg/app/html/options.html

Now here, in this tab; you can do your regular debugging around HTML and javascript.

I hope this suffices your debugging requirement for 'new options UI' for chrome.

Answer 2

Teepeemm's comment is correct.

It's as simple as right-clicking inside the options page modal and selecting "Inspect element" - it will open the correct Dev Tools.