Chrome DevTools- Saving only CSS or JS results - google-chrome-devtools

I have Dev Tools for Chrome installed. I know I can get the output in HAR format. However, I would only like to have CSS HAR, JS HAR file to analyse results. Is it possible to do that? When I save as HAR file on JS tab, it saves ALL types of data in that file.
Thank you

This is not possible in DevTools. It shouldn't be too hard to write something that takes the HAR file that DevTools outputs, and filters it so that only the CSS and JS information remains.
Judging by this archived feature request, it doesn't look like the team plans on implementing this feature: https://bugs.chromium.org/p/chromium/issues/detail?id=620607

Related

How to get the whole code of a HTML element in Developer tools?

I'm looking for possibility to export or just copy the whole code of a HTML element, targeted with Developer Tools. With whole code I mean not only HTML (this option is good visible in context menu), but corresponding CSS and JS code too.
I found a Chrome extension, which claims to copy HTML and CSS, but it isn't reliable in its core function and doesn't copy JS at all.

is it possible to view a question with a browser before importing it to Moodle?

I have created a XML file using R-exams out of just a single exercise to be imported to Moodle. I would like to view it before uploading it in the Moodle question bank. I tried to open it with Firefox and I can see some code but not the output and a message appear saying that the XML file does not seem to have a style sheet associated to it. Is there a way to find this style sheet and to see how the question comes out just using a browser like Firefox or Chrome?
To emulate how the R/exams exercises are converted to HTML by exams2moodle() and how Moodle displays mathematical content, it's best to use
exams2html(..., converter = "pandoc-mathjax")
In recent versions of R/exams the resulting HTML file then automatically loads the MathJax Javascript that enables correct rendering of mathematical content in all modern browsers (including Google Chrome). See also http://www.R-exams.org/tutorials/math/ for some general advice about math in HTML.
To the best of my knowledge there is no tool that would quickly display Moodle XML files in such a way that you can easily assess them.

How to overcome the css problems in IE

I have developed a application, which i tried to run to run in different browsers.
In Google Chrome its working properly.
But when i run the same application in Internet Explorer some CSS are not affecting properly.
The thing i noticed in the debugger is the application is loading the library.css file from resources,
means from the below path its taking that css file and it is affecting my application.
https://sapui5.netweaver.ondemand.com/resources/sap/m/themes/sap_bluecrystal/library.css
Where as in Chrome its not loading any such library.css file.
How can i over come this..?
Please help me on this.
Thanks
Sathish.
Don't load css file in index.html,because in server index.html will not load,so the final solution is we need to load external css file in component.This is the best practise.
"Use browser prefix so that it will work in IE"
Some reference links MDN resource
some unknown but useful

is there any way to output the html from google chrome developer tools?

I have a website that uses javascript to change the HTML dynamically based on input. I use google developer tools to examine the HTML at any particular moment in the lifetime of the page. Is there any way easy way to output the HTML from the elements tab to a file or to the clipboard (so that I can run it thru a validator for debugging)? Control + A does not allow me to select all of the HTML.
You can Copy the <html> element as HTML:
... but you can do this easier at the console:
copy(document.documentElement.outerHTML);
Note that neither of these will copy the doctype. Also this is the serialization of the live DOM which could be totally different than the markup you served. But you know that.

How to export data from Chrome developer tool?

Network analysis by Chrome when page loads
I would like to export this data to Microsoft Excel so that I will have a list of similar data when loaded at different times. Loading a page one time doesn't really tell me much especially if I want to compare pages.
if you right click on any of the rows you can export the item or the entire data set as HAR which appears to be a JSON format.
It shouldn't be terribly difficult to script up something to transform that to a csv if you really need it in excel, but if you're already scripting you might as well just use the script to ask your questions of the data.
If anyone knows how to drive the "load page, export data" part of the process from the command line I'd be quite interested in hearing how
from Chrome 76, you have Import/Export buttons.
I was trying to copy the size data measured from Chrome Network and stumbled on this post. I just found an easier way to "export" the data out to excel which is to copy the table and paste to excel.
The trick is click Control + A (select all) and once the entire table will be highlighted, paste it to Microsoft Excel. The only issue is if there are too many fields, not all rows are copied and you might have to copy and paste several times.
UPDATED: I found that copying the data only works when I turn off the filter options (the funnel-looking button above the table). – bendur
Right-click and export as HAR, then view it using Jan Odvarko's HAR Viewer
This helps in visualising the already captured HAR logs.
I came across the same problem, and found that easier way is to undock the developer tool's video to a separate window! (Using the right hand top corner toolbar button of developer tools window)
and in the new window , simply say select all and copy and paste to excel!!
In Chrome, in the Developer Tools, under Network, in the Name column, right-click and select "Save as HAR with content". Then open a new tab, go to https://toolbox.googleapps.com/apps/har_analyzer/ and open the saved HAR file.
Note that &Lt;Copy all as HAR&Gt; does not contain response body.
You can get response body via &Lt;Save as HAR with Content&Gt;, but it breaks if you have any more than a trivial amount of logs (I tried once with only 8k requests and it doesn't work.) To solve this, you can script an output yourself using _request.contentData().
When there's too many logs, even _request.contentData() and &Lt;Copy response&Gt; would fail, hopefully they would fix this problem. Until then, inspecting any more than a trivial amount of network logs cannot be properly done with Chrome Network Inspector and its best to use another tool.
You can use fiddler web debugger to import the HAR and then it is very easy from their on... Ctrl+A (select all) then Ctrl+c (copy summary) then paste in excel and have fun
I don't see an export or save as option.
I filtered out all the unwanted requests using -.css -.js -.woff then right clicked on one of the requests then Copy > Copy all as HAR
Then pasted the content into a text editor and saved it.
I had same issue for which I came here. With some trials, I figured out for copying multiple pages of chrome data as in the question I zoomed out till I got all the data in one page, that is, without scroll, with very small font size. Now copy and paste that in excel which copies all the records and in normal font.
This is good for few pages of data I think.
In more modern versions of Chrome you can just drag a .har file into the network tab of Chrome Dev Tools to load it.
To get this in excel or csv format- right click the folder and select "copy response"- paste to excel and use text to columns.
You can try use Haiphen, which is a chrome extension that allows you to analyze network traffic and what API calls a web application is making.