I found the script file inside the Resources tab and not inside the Script tab and hence, when I search for the particular function inside Script's tab, it doesn't return result as shown at
How to search all loaded scripts in Chrome Developer Tools?
I want to debug the Resource script file with Chrome Developer Tool, how will I be able to do that.
Unfortunately, you can't debug a script in the Resources tab, so you have to locate the script by name in the Scripts tab.
Related
I'm building a chrome extension and that includes the following scenario in order to achieve my goal.
I want to send info from devtools.js to content script even the DevTools is close or not open. Is it possible?! Because in the documentation, devtools.html or any script attached to it are called or executed when the DevTools is opened.
How to access Console Tab, Network Tab and other tabs then pass the information to the content script?
Is there a way to achieve these two points?
On my website ( https://www.smilinggardener.com/ ), the Google Analytics tracking code isn't visible in the page source code, and Google Search Console can't see it in order to verify my site.
Yet the Google Tag Assistant says it's there, and when I run developer tools and go to 'network', I see the analytics.js file is loaded, and most important, it is tracking visitors.
Any ideas what could be going on?
The analytics code is loaded via an external file.
If you look at your network tab in Chrome there is a column "initiator" (if it isn't there by default you can enable it by clicking the table header and check the respective option). The initiator is the file (if any) that triggered an external dependency.
That in your case the filename contains a complicated id suggests that it is dynamically created by some extension in your CMS.
Is there any way to run a user script without running it through Greasemonkey/Tampermonkey?
I know its a simple question but I can't find any information on this...or if it's even possible.
Can the user script be edited so it doesn't rely on Greasemonkey?
It's up to the browser you are using to enable support for running arbitrary javascript on page load.
Chrome has limited userscript support, but is nowhere near as easy or powerful as Tampermonkey.
Tampermonkey and Greasemonkey (and other browser extensions) were created to address the userscript need.
You do have options for running javascript after a page has loaded though. You can use the developer tools console or you can create a Bookmarklet.
On firefox:
You can use the Scriptish addon (an alternative to greasemonkey for automatically running userscripts).
There is the Developer Scratchpad for editing, saving, loading and running scripts (and userscripts) manually. Also, can be applied on either the current document or browser chrome. Accessed via shift-F4 or Developer > Scratchpad.
And then there is also GCLI (Graphical Command Line Interpreter) which you can write routines for via a mozcmd file and is run manually. You'll need to modify the userscript a bit to access window, document objects. Accessed via shift-F2 or Developer > Developer Toolbar.
This one is a bit more involved, but if you want to go the addon route, you can write an addon using the Addon SDK, and use the page-mod API which injects a userscript into a page automatically.
In Google Chrome or Firefox you can open the DevTools (e.g. by right-clicking the page and selecting Inspect) and then paste the code in the Console tab and press Enter to run it.
In Google Chrome DevTools you can also create a js snippet and run it on demand whenever you need it.
You can also use Chrome DevTools Snippets:
Right-click anywhere on the page and select Inspect.
Select the Sources tab — you will see a number of subtabs: Page, Filesystem, Override, Content scripts and finally Snippets (you might need to click >> in order to see it).
Click the plus button ➕ to add the js code, and use right-click > Run to execute the code.
NOTE: If the original script uses extra js libraries (jquery, etc) and the libs are not already preloaded on the page, then you'll need to load them yourself (see this).
Unlike the code you run from the Console, you can set breakpoints in your JS snippets.
In Chrome this seems to be easy, in the source tree, you see al scripts, including those loaded by iframes, so you can open them and set debug breakpoints.
In Safari inspector although, in the Resources tab, the tree only shows resources loaded on the top window.
I know the console has a dropdown to evaluate an expression on the context of an iframe, but I need to debug using breakpoints, is there a way to do that in Safari?
You can replace the questionable JS file from prod with a local copy using Fiddler (windows) or Charles (mac). These tools can be configured to serve the local copy when the browser requests the remote copy.
This allows you to modify or debug JS from any domain - even if you do not own the code. Adding your debugger to the local file should trigger the debugger console.
Fiddler:
check out this write up for Fiddler details: stackoverflow.com/a/3936627/1861459
Charles:
use the Map Files feature of Charles: http://www.charlesproxy.com/documentation/tools/map-local/
I am debugging some 3rd party app and I would like to dynamically reload/replace some of the content of the tags, however by inspection properties like innerHTML are not set and I can't see anything from the javascript developer console that would suggest a property of method to get the javascript content.
The file is dynamic so re-downloading the file it not suitable in this case.
There are some other questions on SO which address this problem with no good answer for me, for example it is suggested to pull the content again using an XMLHttpRequest or some jQuery. However this is not suitable for my purpose.
How can I get the content of the file specified as the 'src' of a <script> tag?
However I can see that google chrome can inspect the loaded source content of the script tag in the developer console, here is a screenshot;
Any idea how it is done? I am happy to use the google chrome devtools, or some platform/browser specific extension as I am just using this for debugging.
I presume it is accessing some local cache of the downloaded src, but I would also expect that cache file or value is inspect-able from google chrome somehow...?
DevTools are deeply integrated into the browser and do that with help of C++ code in WebCore. In your case DevTools just be notified when browser makes a request, receive the response, receive the data etc.
Chrome DevTools AKA Safari Web Inspector has two parts.
Backend (~26kloc of C++ code) and Frontend (55kloc of js code).
You can see the API between WebCore and DevTools bakend at InspectorInstrumentation.h.
Also there is an API between Backend part of DevTools and Frontend part of DevTools.
It is described in Inspector.json. You can use this API and write your own Frontend or implement an extension which does something with help of DevTools backend.
The docs at the project's documentation page.
The latest video about the project at Google IO 2011.
#cwallenpoole tells how to get the js code.. simply open it in browser and if it is minified simply include (copy contents of js file) it in a script tag in html doc, go to chrome dev tools, open the scripts pane and navigate to the copy pasted script source and press the curly brackets at the bottom bar of dev tools and see the magic :)
You can get the source of any JavaScript file by simply going to that URL -- this is one from StackOverflow: http://cdn.sstatic.net/js/stub.js?v=845b73ac2eff
The problem, of course, is that it is minified when viewed that way, which leads to long, annoying headaches, but it is still accessible.