I want to use a google font(Roboto/Open Sans).
Where I can check which font taking much time to load?
As I remember google.com/fonts had this feature earlier: http://prntscr.com/ekyy1d but now I can't find it there...
you can use your browser's dev tools to get the file size and how long it took to download from the CDN.
This is chrome, under the "network" tab in dev tools http://i.imgur.com/aJEaCBC.png
Wasn't able to find the gauges but there is an indication of the speed in the lower right menu bar.
screenshot of menu bar
Related
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! :)
I just set up my page using WordPress and Elementor and the page is very fast using Chrome. When using Safari on Mac, however, the page becomes super laggy and the CPU ramps up. I already tried using Autoptimize, W3, and Jetpack, to now avail.
Google PageSpeed says the issues lies in Javascript, however, I do not know how to optimize that. I tried using Asset CleanUp, but I already disabled all the non crucial plugins and animations.
Thanks!
The URL is: melius.live
At the bottom of your site you have three videos. Remove them and try to lazy load the iframes.
Check everything at W3 Total Cache > "User Experience".
You also can look in the Safari Inspector at Network > Waterfall to see which parts take a long time. Maybe your Mac Machine is just weak.
Try using a different video plugin. More or less problem is with the Videos as it is generating code that is being blocked by the browsers.
Because Open/Close it loss all requests in tab Network, so how to hide/minimum Firefox Developer Tool without close it?
Similar to Firebug.
Thank you
There is currently (as of Firefox 52.0.2) no option to minimize the DevTools. Until Firefox 40 there was one, though it got removed in Firefox 41 with the following reasoning:
It didn't get any UX review and not everyone was in agreement about the UI for it.
It is planned to get added back again, though.
You can do this by popping the DevTools out into its own window (the icon just to the left of the close button). DevTools is then a separate window which can be minimized/maximized, etc.
The button to move DevTools into a separate window:
The standard minimize button:
I'm a mid level website designer and manager for clients sites and I know just enough HTML/CSS to be dangerous. I use the Chrome developer tools to see where I can make CSS changes primarily.
Now for some reason, the debugging tool pauses no matter what I do. I've turned off the pause button, but it makes no difference. Has anyone else had this issue? Do I have a virus or something?
I'm trying to make CSS changes to a Wordpress login page and I can't even get it to react to my changes so I can see what I like.
Thanks in advance for any help. Here is my ugly login page that I need to fix:
http://tracoutdoor.com/wp-login.php
It sounds like your debugger may be set to break on exceptions automatically. If you open the dev tools and click the Sources tab and look at the right hand menu, ensure both the Breakpoints and Exceptions icons are greyed out (not blue) like below:
Also ensure there are no breakpoints set in the Breakpoints section.
I hate Firefox, I really do, but as a web developer I'm chained to it b/c of the robust set of tools that Firebug offers. Recently Chrome and Safari's inspection tools allowed users to edit full chunks structural code (in a very buggy manner), but you still can't edit full stylesheets. Usually when someone brings this up, Chrome and Safari developers say "BUT YOU CAN EDIT CSS," and that's true, to an extent. You can edit CSS property-by-property (which takes forever if you have a lot of changes) in both browsers, but there is no way to see the full computed stylesheet, make edits within it, and immediately see the results. To date, only a full install of Firebug on Firefox allows you to do this.
Has there been any momentum in either of the Chrome or Safari camps to build a plugin to match this unparalleled function? Cheap plugins that allow you to insert CSS into the page are not the answer. It's really simple:
Have a list with the current stylesheets that are being referenced
Choose the one you want to edit, and click an edit button
See all the code in the stylesheet
Make changes and see them reflected on the page immediately
Is it really that hard to build something that does this? I think it must be, b/c why else would the developer communities of two browsers completely ignore it? If there's something out there that now offers this capability, I'd love to hear it; otherwise, maybe someone will step up to the plate and develop it for either Chrome or Safari. It seems like the guys who developed the CSS Edit app would be all over this.
Thanks to you I found it!
The Live Stylesheets extension for Chrome is what you are looking for. Be sure to restart Chrome after installation to use it.
You can edit external stylesheets in Chrome DevTools, too (since Chrome 15 or so). Just double-click the stylesheet contents in the Resources panel (or click the "Edit" button below), edit, Ctrl-S to commit a new revision, Esc to cancel editing. And it updates your page as you type!
You can edit your CSS files directly on Chrome without relying on any extension.
Here is how: Edit CSS files on the fly using Chrome DevTools
A different way to access it:
right click the page, select inspect
on the DevTools, click on "Sources"
locate the css on the "Network" pane and click it
change the css and save it ( by pressing ctrl+s )