How to debug js in extension page?

[Tobias Mueller]

Hi,

how can I debug js code in extension page?

I have local page in a chrome extension and want to set a breakpoint in order to debug it when the page is opened.

How can I do this?

Thank you

Tobias

[Patrick Kettner]

Hi tobias!

It is the same as any other JavaScript in the browser. You can always insert the debugger keyword into your code to trigger it, assuming dev tools is open. 

Where to get to the code to dynamically trigger breakpoints depends a bit on what environment the extension is executing in. Content scripts are injected into the page itself, service workers are their own context, and can be selected from the drop down in the upper left corner of the scripts panel. Popup also show up as their own origin, but only exist while they are open. 

I think one of the easiest ways to quickly get a reference to where the code is would be to add a console.log, which once logged gives you a link in the console directly to the line of code that made it, with the correct context already selected. 

Hope that helps! Let me know if it doesn’t, or if you have more details to share 

patrick 

--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/F60DEEA1-EBFD-4E58-BEE1-11BBB11993D0%40gmail.com.

[wOxxOm]

Simply open devtools, navigate to the source file either in the Sources panel or via Ctrl-O key, click the line number gutter to set a break point, then do whatever necessary to trigger the code if it's something conditional or reload the page (Ctrl-R) if it's in the startup phase of the script.

See https://developer.chrome.com/docs/devtools/javascript/breakpoints/

[Tobias Mueller]

Thank you.

I can set breakpoints but the execution does not stop once the page has opened.

The js code in the page registers a message listener (chrome.runtime.onMessage.addListener).

Reloading the page with opened devtools didn’t help nor the debugger keyword.

Tobias

[Patrick Kettner]

I am terribly sorry to hear that you were having a problem, but that _is_how you set a breakpoint. If you’re able to share code, I would be more than happy to help further, but there’s not much to go on based off of what you have shared so far.

[wOxxOm]

It can mean several things:

1. breakpoints disabled in devtools -> Sources -> toolbar on the right -> the crossed flag-like icon is blue
2. a bug in the browser
3. you're not opening the correct devtools e.g. if it's the options page or the popup page you should right-click your extension's area, right-click it, then choose "Inspect".

[Tobias Mueller]

Thank you.

Breakpoints are not disabled.

I click ‚inspect‘ on the extension page ‚viewer.html' (url states: "chrome-extension://bonnihbolphedflenhgakjfalolmakmh/viewer.html“)

The page is opened by a browser action in a new tab.

Here is a part of the js code that’s linked in the viewer.html via <script src="viewer.js"></script> in the body.

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {

const csvUrl = request.csvUrl;

console.log("csvUrl: " + csvUrl);

fetch(csvUrl)

.then(response => {

if (!response.ok) {

throw new Error("Network response was not ok");

}

return response.text();

})

.then(csvData => {

const papa = Papa.parse(csvData, { header: true });

const csvTable = buildTable(papa);

document.getElementById('csvTable').appendChild(csvTable);

})

.catch(error => {

console.error("Error loading CSV file:", error);

});

//return true from the event listener. This keeps the sendResponse() function valid after the listener returns, so you can call it later.

sendResponse({ response: true });

});

If I set a breakpoint e.g. on the console.log statement it does not stop there.

—

Tobias 

[wOxxOm]

> If I set a breakpoint e.g. on the console.log statement it does not stop there.

It means this code doesn't run i.e. the message isn't received, probably because it's not sent correctly. To verify that breakpoints are working set a breakpoint at the line that is guaranteed to run - the very first line.

[wOxxOm]

Note that if your popup creates the tab without "active:false" parameter, doing so will immediately close the popup and it won't be able to sent any messages.

[Tobias Mueller]

It’s not a popup it’s a page opened in a new tab.

The code works and the log statements are showing up in the console.

I can simply not debug it.

This is how the tab is created.

chrome.action.onClicked.addListener(function (tab) {

var viewerUrl = chrome.runtime.getURL("viewer.html");

chrome.tabs.create({url: viewerUrl}, function (newTab) {

chrome.tabs.onUpdated.addListener(function listener(tabId, changeInfo) {

if (tabId === newTab.id && changeInfo.status === "complete") {

chrome.tabs.onUpdated.removeListener(listener);

chrome.tabs.sendMessage(newTab.id, {csvUrl: tab.url}, function (response) {

console.log("CSV URL sent to viewer");

});

}

});

});

});

[wOxxOm]

> It’s not a popup it’s a page opened in a new tab.

I was guessing the way you open it. Now that you've shown the actual code I see how you do it.

So here's what happens:

1. the tab is created

2. it is immediately loaded (e.g. in 100ms)

3. a message is sent

4. it is received and console.log prints something

5. you open devtools and set a breakpoint

6. there are no more messages so the breakpoint doesn't trigger

If you want to debug the listener you need to pause the initiator before sending the message. To do so, open devtools for the service worker and set a breakpoint on the line that calls sendMessage. Then run this code by clicking the extension's icon. When the tab opens, open devtools of the tab and set a breakpoint inside the listener. Now switch to the first devtools and un-pause it by clicking the play button or F8 key.

[Tobias Mueller]

Great, thank you!

Debugging by console.log felt like back in the 00er years