Chrome extensions to optimize the front-end
Installable and standard Google Chrome extensions to optimize front end.
Install here - chrome.google.com/webstore/detail/quick-javascript-switcher/geddoclleiomckbhadiaipdggiiccfje
With this, in fact, everything is simple - when we want to look at something without js - click on the button in the right corner and voila.
chrome.google.com/webstore/detail/edit-this-cookie/fngmhnnpilhplaeedifhccceomclgfbg?utm_source=chrome-ntp-icon Everything is also very simple and periodically usable. You can see, you can fix it if necessary.
And if the previous 2 extensions are more or less often encountered, the following are for some reason forgotten:
Allows you to improve the performance of your application on the front-end side.
developers.google.com/speed/docs/insights/using_chrome - here you can both read and install this wonderful plugin.
In a nutshell - press Ctrl + Shift + J - you have a console. After installation, an additional pagespeed icon will appear there. Go to the desired page and click on the Analyze button in the pagespeed menu. We are waiting for your page to reload and read tips on how to optimize. There are also great tips for reducing the size of images, and already processed options can be picked up via unique links, directly from the console.
Directly from the Google furnaces, still hot, chrome.google.com/webstore/detail/speed-tracer-by-google/ognampngfcbddbfemdapefohjiobgbdl .
Install it - and see the green timer icon in the upper right corner. It's a bit confusing, but pretty easy to figure out. Click the icon, while on the desired page. A window opens where the recording has already begun. Next, go back to the old window and reload the page there. We return to the window with the tracker and press the red circle, stopping the recording. Next in the menu there are 3 magnifying glass icons. +, -, <>. Click the last option - we will scale all the activity. Voila, you can enjoy the schedule of loading your page - how, who loaded (DOM, js, drawing layout and so on). There is also an icon with a diagram in the upper right - it will show everything in a pie chart.
From left to right, the icons of the corresponding extensions. To be recognizable.
These were all installable and non-standard plug-ins - and what do we have in the box set?
Open the console and see the tab.
A wonderful tab that tells you pomillisecond what element of the page how much time you have loaded. Go to it and update the page. For example, you can visually see how html waits for js to be loaded, if it is not added asynchronously, and also to track down who is the weak link, which picture or script has been loading longer than others and so on.
And one more standard module finally:
In the same place in the Google Chrome console, next to the Network tab. This module can collect statistics on js and css - and show the value in percent or in ms (press 2 times on any value in the column) of each loaded part of css or js.
Js switch
Install here - chrome.google.com/webstore/detail/quick-javascript-switcher/geddoclleiomckbhadiaipdggiiccfje
With this, in fact, everything is simple - when we want to look at something without js - click on the button in the right corner and voila.
The next lot will be cookies
chrome.google.com/webstore/detail/edit-this-cookie/fngmhnnpilhplaeedifhccceomclgfbg?utm_source=chrome-ntp-icon Everything is also very simple and periodically usable. You can see, you can fix it if necessary.
And if the previous 2 extensions are more or less often encountered, the following are for some reason forgotten:
PageSpeed
Allows you to improve the performance of your application on the front-end side.
developers.google.com/speed/docs/insights/using_chrome - here you can both read and install this wonderful plugin.
In a nutshell - press Ctrl + Shift + J - you have a console. After installation, an additional pagespeed icon will appear there. Go to the desired page and click on the Analyze button in the pagespeed menu. We are waiting for your page to reload and read tips on how to optimize. There are also great tips for reducing the size of images, and already processed options can be picked up via unique links, directly from the console.
Speed tracer
Directly from the Google furnaces, still hot, chrome.google.com/webstore/detail/speed-tracer-by-google/ognampngfcbddbfemdapefohjiobgbdl .
Install it - and see the green timer icon in the upper right corner. It's a bit confusing, but pretty easy to figure out. Click the icon, while on the desired page. A window opens where the recording has already begun. Next, go back to the old window and reload the page there. We return to the window with the tracker and press the red circle, stopping the recording. Next in the menu there are 3 magnifying glass icons. +, -, <>. Click the last option - we will scale all the activity. Voila, you can enjoy the schedule of loading your page - how, who loaded (DOM, js, drawing layout and so on). There is also an icon with a diagram in the upper right - it will show everything in a pie chart.
From left to right, the icons of the corresponding extensions. To be recognizable.
These were all installable and non-standard plug-ins - and what do we have in the box set?
Open the console and see the tab.
Network
A wonderful tab that tells you pomillisecond what element of the page how much time you have loaded. Go to it and update the page. For example, you can visually see how html waits for js to be loaded, if it is not added asynchronously, and also to track down who is the weak link, which picture or script has been loading longer than others and so on.
And one more standard module finally:
Profiles.
In the same place in the Google Chrome console, next to the Network tab. This module can collect statistics on js and css - and show the value in percent or in ms (press 2 times on any value in the column) of each loaded part of css or js.
')
Source: https://habr.com/ru/post/161831/
All Articles