When I use a XML view for a page in SAPUI5, and I open Developer Tools on Google Chrome and check, under the "Sources" tab, the directory that has the ".controller" file, I cannot see the "view.xml" file. Why does it happen? Does the browser "excludes" the XML file after it is processed by the UI5 core? Thanks in advance!
The sources tab in Google Chrome Developer tools is meant for debugging the logic of your application. It allows you to add break-points, see your calls stack and observe/tinker with intermediate variable values.
As SAPUI5 XML views don't contain any logic, it doesn't make sense to show it in the sources tab, as there is no logic to debug. You can see your XML files in the network tab though, if you just want to do some inspection on its contents.
More info on debugging using the source tab can be found here:
https://developer.chrome.com/devtools/docs/javascript-debugging
I think that the sources tab only displays some file types. It doesn't display .json files either.
You should be able to access unparsed XML files through Network tab.
Related
I have loaded a web page and now opened Chrome developers console. Now I want to read the resource files that website has loaded (like styles / images / language properties) in the web browser console. If it is possible to read what network calls made from console using Javascript code will also suffice.
(Actual implementation would be like:
I will be launching Chrome browser using Selenium and Java code and once launched I will execute Javascript code to get internationalisation file loaded over network for particular website so that I can adapt my Java selenium code base as per internationalisation language used.
URL : https://www.sapfioritrial.com/sites?helpset=trial&sap-client=001
Trying to get url of this i18n_en.properties file which can be seen in network tab but I need to get this using Javascript executed using Java Selenium code
)
Any help highly appreciated
Go to the "Resources" tab. Under the "Frames" folder in the tree view on the left, you'll find a hierarchy of the files and clicking them lets you view the contents.
The "Network" tab lets you see all the resources accessed, and shows you the HTTP status (ie: 200, 404, 500, etc...), size, how long it took to download, and in what order the resources were loaded.
The network calls are available in the network tab
I have a JavaScript web application and I am using Firebug to debug it.
In Firebug's Script panel I can see all JS files which the website is using:
Is there any way to download all these files?
Use spiderzilla Based on HTTrack
There are many ways to download the website assets. below are few ways.
wget --page-requisites url
HTTrack
Follow the similar answers.
https://superuser.com/questions/114769/plugin-for-firefox-to-download-the-entire-webpage-with-css-javascript
httrack-wget-curl-scrape-fetch
https://softwarerecs.stackexchange.com/questions/10216/download-all-remote-assets-js-css-into-local-machine-in-a-batch
You can always right-click a single file (in Chrome's or Firefox' DevTools or Firebug) and then click the option to open the file in a new tab, then press Ctrl + s to save it. But there is no way of saving them all at once.
Is it possible to load an external source-map file (JSON), not included in the minified JS file used on a website?
So far the only ways I know of to include a source-map for a particular js file is to either inline it, add a link in comments or set the path in HTTP header.
So I wonder - is it possible to load a source-map file that can't be accessed via HTTP? For instance - load it from my local drive, and point it to the js file it is supposed to be mapping?
Cheers
I know question is old, but had it myself nevertheless. Here's how you do it in Chromium 63
Open Debugger
Right-click in source code area
Select "Add source map…"
Enter URL to source map file
if browser is able to download it and process it then sources appear as entry in source tree.
PS built with hidden source (separate files, no source comment)
PPS does not matter where files are hosted, because it is URL. Must be accessible by browser.
August 2022, Chrome 104:
Open Chrome Dev Tools
Go to "Sources" tab
Find the .js file you are looking for. Click on it.
Right click somewhere ON THE SOURCE.
Find "Add source map..." option there.
(I first wrote this as a comment to the other answer, but #christian-vincenzo-traina suggested having it as a separate answer.)
I routinely modify Javascript files directly from Chrome Developer Tools. I am looking for a way to list all the modifications that I have done on a page.
I know Chrome highlights the tabs where modifications have been done. What I would rather want is a diff between what was originally loaded and the current state.
I can't simply save the files to disk as I have a complex build process generating these files.
You can right-click in the source of any script file and select "Local modifications...". This will allow you to see a history of the changes you've made:
Chrome developing mode-> Sources -> select your .js file -> Right Click -> Select Local Modification -> Check History Tab
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.