I don't seem to understand what the coverage tab in the Chrome Devtools exactly means. From the documentation I found online, it doesn't become 100% clear to me.
For example:
There is a CSS file called 'jet-elements.css' on my website (see screenshot). In the coverage tab, it says that this file is 229.658 bytes (229kb). However, the network tab shows that only 21.7kb is loaded.
Screenshot of Chrome Devtools
My questions:
What's the right way of reading the data from the network and the coverage tab? What does the data from both tabs exactly mean?
What is being loaded for the user of the website? Is it the entire CSS or just the part that's used?
Does the unused CSS make the website slower for the user?
Hope someone has some answers for me! :)
Related
I have a very pretty calendar report that I've created on one machine, that shows my company's daily revenue as a color coded block for every day for the past several years. After finally getting a color scheme down and pretty much finalizing it, I went to test it on another machine - and hit a rather large obstacle.
This is the report that I used as a template:
http://bl.ocks.org/mbostock/4063318
It's awesome. And, inside Internet Explorer 11, it looks fantastic. I never would have expected that copying the code and testing the report would produce a blank page, but there it is. On that page, the calendar report is visible. In IE 11. Copying the code to a new html file and opening it, shows nothing. In Firefox, however, everything is visible. as is.
Now, there's a part of that page that points to "//d3js.org/d3.v3.min.js"
And I figured out that in order to make that work in firefox I had to add the http: in front, so that's not my issue.
I'm literally sitting here at my desk staring at two browser windows open and pointing to the same html file. One contains my beautiful report, one is a completely blank page.
Some cursory google searches reveal that IE 8 or lower have issues with the svg. I can't seem to find any references on someone having a similar issue though. Their situation seems to be that with IE10, you need to specify the height and width, not just one or the other, to make sure everything scales properly.
If I could have my way, I'd just run Firefox on all of the machines that are going to run the report, even if it's just for that one thing! Alas, I am but a mere peasant coder and so I have to make it work. in the dreaded IE.
Are there any svg/html/d3.js coders out there that can tell me another way to spit out the data I'm using so that I can get what I'm looking for?
copying the code and testing the report would produce a blank page
Because you're outputting invalid HTML. There is no html or head element for starters.
Output your code in to a file like example.xhtml and open it in Firefox (specifically) as it's XML parser will very quickly tell you what line and column the first XML parser error is occurring on. You are rendering in standards mode instead of quirks though that does not imply your page meets standards.
var m=(document.compatMode == 'CSS1Compat') ? 'Standards' : 'Quirks'; window.alert(m+'-mode.');
I'm having an issue with my website http://www.ben-drury.co.uk/ (I know the content sounds dumb, but it's my first attempt at a portfolio and it's not finished) where the formatting of the text is very peculiar under a specific set of circumstances.
When loading any post or page in Google Chrome, if I remain in the tab for the duration of the loading it looks like the image below, which is perfect and exactly what I want.
However if I start loading the webpage in a new tab and don't instantly navigate to that new tab, or indeed if I refresh the page and navigate away from the tab, when I come back it looks like the image below.
Interestingly it seems to work absolutely fine in Internet Explorer and Firefox, so initially I thought that it might be an issue with my installation of Google Chrome. However testing it on other computers resulted in the same thing happening, and a variety of different ways of phrasing the issue has turned up very little.
So essentially, how do I fix it for Google Chrome users?
(For those that cannot see the images, the text in the post placed as an example runs outside of the box it should be displayed in and often lines appear over the top of each other around hyper links.)
Update:
I've managed to fix the issue for pages by removing the justified alignment of the text. However I have made said change to the posts as well yet the problem persists for them.
So after a little more delving into the issue, I came to the conclusion that not only was the idea of web safe fonts actually a load of miss-represented nonsense, but that Google fonts might be the way to go. After installing a plugin for Google fonts onto WordPress and making all my posts use one by default, my problem has been entirely resolved and I can even have justified text on my posts and pages.
I am having very unexpected problem on my Google Chrome inspector today. When I was inspecting my local HTML files I noticed I was unable to see from which css file, my classes were coming from. It's very strange because it's always showed it before. Here is the Screen shot
But if I inspect the web form not from Local it shows the files:
Why it's doing this? Is it doing it because of any recent Updates of Google Chrome ? How I can make it work for Local files too ? I need it badly.
Thanks
I just fixed this issue by referencing source maps relative to the workspace root. See my answer here for more information.
I had the same problems as you.
Try to uncheck "Enable CSS source maps" in the "Sources" group of "DevTools settings".
I suppose that one is for SASS/LESS files, but for some reason it affects normal CSS files as well.
This seems to be a bug. See https://crbug.com/422073 to track the progress on this issue and comment there if you have additional information. I am not able to reproduce this problem so far.
I came across this thread a few days ago looking to get rid of the stark white background in the DevTools window. One thing led to another and I started in on adding rules for many more elements using the base CSS file (chrome-devtools://devtools/devTools.css) as a guide.
The file being modified can be found in the following locations:
Mac: ~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css
PC: C:UsersYourUsernameAppDataLocalGoogleChromeUser DataDefaultUser StyleSheetsCustom.css
Ubuntu (Chromium): ~/.config/chromium/Default/User StyleSheets/Custom.css
Midway through, I started running into a problem when modifying rules with very common selectors. The first two I ran into were #main and #toolbar. When adding rules for the more common selectors, if a web page is also using these same selectors (ie. google search), then the rules are applying to those pages or sites as well.
I understand why this is happening. My question is...
Is there a way to only target the DevTools window in Chrome via this Custom.css file without affecting any other domain?
I've tried using the #moz-document domain () and #moz-document url-prefix ()declarations but can't figure it out...
I'm too far in to give up now, so I'm hoping someone can assist.
Here is a screenshot of my progress so far:
Ok, so after digging around, I noticed I actually missed the notice right smack dab at the top of the original article page:
Since publishing this article the Chrome Team have added a unique ID
to the container of the Chrome Dev Tools. The ID is #-webkit-web-inspector(Trac Reference)
So, the fix to my above post is to add body#-webkit-web-inspector to all of your selectors and it works perfect, thus only targeting chromes DevTools window. Also, very important... to those wanting to create a more complete theme, it’s HIGHLY RECOMMENDED to do it via "inspecting the inspector". More info on how to do this can be found here: How do you inspect the web inspector in chrome?
See screenshot below of "inspecting the inspector":
I developed a website using code igniter, styled it with CSS, locally it works fine but online it looks like css is not loaded it picks up the old css style. I checked the link but it's correct. What gives?
Without more information (such as seeing the site in question), I can't give you a direct answer, but I can give you some pointers.
My suggestion is to use a tool like Firebug (in Firefox) or Chrome's Developer Tools, etc. These tools allow you to see full details of all requests being made by the browser.
(the exact instructions will differ according to the tool you're using, so I'll assume Firebug for simplicity).
Open your page in the browser, with Firebug open, and look at Firebug's "Net" tab (And make sure that the option below the tab is set to "All"). This will list all requests that are made by the browser.
The key thing for you is to look for any 404 errors. Since you say your CSS isn't working, it's a pretty good bet that your stylesheets are failing to load. The 404 errors listed in Firebug will show you why they're failing to load.
If you hover over the filenames, Firebug will expand it to show you the full URL that it attempted to load. This will almost certainly show you that you've got something wrong in your configuration, and it's trying to load the stylesheets (and possibly other files too) from the wrong location. This should show you what's going wrong and give you a enough clues to be able to work out how to fix it.
Hope this helps you solve the problem.