I want to make a dev tools Chrome extension that lets the user go to specific points in the page's source code (whenever the page's source code calls some global function foo that I inject into the page via an extension content script).
I can get a stack trace by having function foo throw an exception and then catch it.
But how can I tell Chrome dev tools to go navigate to a certain line in the source code? Is there an API call for that?
There's an API function just for that, chrome.devtools.panels.openResource.
Note that line numbers are zero-based for this API.
// Opens line 34 of file https://example.com/test.js, assuming this resource is present:
chrome.devtools.panels.openResource("https://example.com/test.js", 33, function() {
// Resource should be open, but no way to test that it succeeded
});
Related
I am debugging a Chrome extension off github. (https://github.com/artemave/translate_onhover)
I want to see the debug() messages that are in the code: like this one...
--------From contentscript.js------------
const hit_text_node = getExactTextNode(text_nodes, e)
if (!hit_text_node) {
debug('hit between lines')
return ''
}
I have tried:
In Chrome on a web page, I tried right-click verbose, but they don't appear.
I do see console.log('jim103',word) from devtools from chrome://extensions background.js
I also tried putting the word
debugger;
in both files, but it just caused a breakpoint in background.js, not the debug message I seek...
I know these two files are back/front separated... That's all I know.
JavaScript does not have a built-in function called debug, which tells us that it's a custom one. We could also figure it out by trying to step-into that function during debugging (with F11 key). This leads us to trying to find its definition – and it's at the top of the file: const debug = require('debug')('transover'). The fact that the argument of require here is not a path, but just a name, tells us that this is a package – go to package.json and there it is: "debug": "^4.1.1". By default, NPM packages are downloaded from npmjs.com, let's head there and find the package – https://www.npmjs.com/package/debug. Its docs tell us that in the browser environment its behaviour is controlled by localStorage https://www.npmjs.com/package/debug#browser-support. So all you have to do is type localStorage.debug = 'transover*' In the console for a particular site and reload the page. Debug messages will start appearing in the console.
-В Иванов
There are two outputs, back/front background.js comes out in DevTools, but front=contentscript.js:debug() stuff comes out on the page.
Do right-click->Inspect and look on the right side.
In order to triage a problem with a web browser I am trying to determine the initiator of the XXX-xsrfstatemanager.js file (the XXX part seems to be something dynamic like a nonce) that occurs as part of a Google Authentication flow (using OAuth).
When I use Chrome developer tools, it says the below URL is the initiator:
https://accounts.google.com/o/oauth2/v2/auth?approval_state=%21Ch[REDACTED]Q%E2%88%99AJ[REDACTED]xq&as=-aBk[REDACTED]
Looking at the result of the above page see a lot of Javascript, but the string "xsrfstatemanager" is nowhere to be found, nor do I see any other javascript pages being included. Unless there is some really cryptic code that is somehow building this URL, the call is actually coming from some other page.
Does anyone know how I can get the 'real' initiator? Or if the above URL might be correct, if I can get more information like what exact line number of the file initiated the call?
By the way, while I edited the above URL for security reasons, if you go to (for example) www.quora.com and quick "continue with google" it is easy to see the flow in question.
The flow includes a redirection, which is why you cannot see the source code that initiates/references that script.
If you view the source of the original URL that is opened when you click on "Continue with Google", you will see the <script src> that references it. This works in Chrome and probably Safari -
view-source:https://accounts.google.com/o/oauth2/auth?redirect_uri=storagerelay%3A%2F%2Fhttps%2Fwww.quora.com%3Fid%3Dauth488109&response_type=code%20permission%20id_token&scope=email%20profile%20openid&openid.realm=&client_id=917071888555.apps.googleusercontent.com&ss_domain=https%3A%2F%2Fwww.quora.com&access_type=offline&include_granted_scopes=true&prompt=select_account&origin=https%3A%2F%2Fwww.quora.com&gsiwebsdk=2
From the source code -
<script src='https://ssl.gstatic.com/accounts/o/532969778-xsrfstatemanager.js' nonce="IgiKmQiLZIHDwGvce7/q6Q"></script>
You can also use tools like Fiddler to see the source code of the redirect, or check "Preserve log" in the Network panel of the Developer Tools feature of Chrome, or by going to the original URL with JavaScript disabled.
To have better control over my debugging messages I created a wrapper for console.log which I have defined in debug.js and call via debug.log(). But when I let the wrapper log some message to the console, the link now points to the definition of my wrapper and not anymore to the code where the logging function is called from.
So every link in my console looks now this way
debug.js:27
debug.js:27
debug.js:27
This makes it pretty hard to find the correct location in the source code to set breakpoints.
Is there a way to let console print the link to the location of the origin of the debug.log execution?
I am a web scraping newbie. I have identified a JS function on a server, whose I/O I need to track. It's an obscured encryption function, and I need to know what values it takes for input and what it outputs. How can I get this done?
So far, I've opened up the web page in firebug, identified where the function is called and then set a breakpoint. However, when I refresh the page and clear my cache, the browser ignores my breakpoint and loads the page as if there were no breakpoints on it.
You can use console.log in your function to load data to console. But it's better to use it any debug state:
if (app.debug) {
console.log(data)
}
Where app for example is your namespace, debug is flag for logging and data is your function/application data.
More info about console.
About clear cache: Firebug and Chrome Dev Tools remove all breakpoints from file if file was changed.
maybe this question is a bit noob style but I don't understand this JavaScript stuff.
My question: how do I debug injected code of the following
chrome extension example?
The file popup.js executes send_links.js (this is the injected file, if I understand this correct). I would like to debug send_links.js. I cannot set any breakpoint because I cannot see send_links.js in the Developer Tools of Chrome. I tried the command "debugger;" in send_links.js but it does not work. "console.log("blah");" commands are ignored too.
Thank you!
The debugger keyword will work if you open the Developer Tools for the current tab before you press the action button.
Also, if you want the script to display with its name, add the following line anywhere in send_links.js:
//# sourceURL=send_links.js
Then the script will show up in the 'Content Scripts' tab of the Developer Tools of the current tab. There you can set breakpoints and such. But you need always to open the Developer Tools for the tab before pressing the button for this to work.
All Injected Files or Content Scripts are Exposed to Page Developer Tools, You can set breakpoints and all regular stuff you do on regular Java Script Pages.
(source: google.com)
All your console log(s) appear in the page they are injected.
Ex:
If i inject console.log(document.getElementsByTagName('body')[0].style); to http://www.google.co.in/, then i need to open devtools of http://www.google.co.in/ page and look in its console.
The Output appeared is similar to regular debugging result.
EDIT 1
They are exposed through chrome.tabs.executeScript() but indirectly, when you set debugger; command you can inspect code.
Demonstration
If some sample code injects
chrome.tabs.executeScript(35, {
"code": "console.log('hi');debugger;//# sourceURL=send_links.js"
});
debugger of page shows the script being injected.
I guess it's because you open the debugger tool on the tab and not on the extension. Right click on the icon of your extension and choose the Inspect popup menu item. You can find more informations on this page http://developer.chrome.com/extensions/tut_debugging.html
In this case the script is not injected until you open the popup. Once the popup window loads, it injects send_links.js, which in turn sends a message as soon as it is done getting the links. You could reverse this messaging and inject the file in the manifest:
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["send_links.js"]
}],
add an on message handler to send_links.js with support to send a response
chrome.extension.onMessage.addListener(function(message,sender,sendResponse){
[...]
sendResponse(links);
});
and then replace the onMessage handler and executeScript in the popup with a sendMessage callback
chrome.windows.getCurrent(function (currentWindow) {
chrome.tabs.query({active: true, windowId: currentWindow.id},function(tab) {
chrome.tabs.sendMessage(tab[0].id, {method: "getlinks"},function(links){
for (var index in links) {
allLinks.push(links[index]);
}
allLinks.sort();
visibleLinks = allLinks;
showLinks();
});
});
});
This arrangement will put send_links.js into every page so that you can debug it more easily. Once it is bug free you can switch back to programmatic injection because in cases like these it is more efficient.
You can find the script under Sources > Content Scripts > One of them (plfdheimenpnchlahmhicnkejgmhjhom for example).
Edited source files