The latest articles on DEV Community by Mazdak (@mazdak23). https://dev.to/mazdak23 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F764217%2F6fb197ed-4342-4a6b-8d50-71c3a9de8482.jpeg https://dev.to/mazdak23 en Mazdak Wed, 01 Dec 2021 12:33:55 +0000 https://dev.to/mazdak23/what-is-google-lighthouse-and-why-you-should-use-it-48ib https://dev.to/mazdak23/what-is-google-lighthouse-and-why-you-should-use-it-48ib <p>Google Lighthouse is a free and powerful review tool that helps improve the quality of our website. In fact, using Google lighthouse we can evaluate all the pages of our website. One of the great advantages of Google Lighthouse is that it is easy to use, which at the same time gives us accurate information about the pages of the website. But let’s take a closer look at what is Google Lighthouse is and why we should use it.</p> <h4> Table of Contents </h4> <ul> <li>What is Google Lighthouse</li> <li>Speed ​​is one of the basic criteria</li> <li>How Google Lighthouse works</li> <li>PageSpeed ​​Insights vs Google Lighthouse</li> <li>How to work with Google Lighthouse</li> <li>Work with Google Lighthouse in Google Chrome</li> <li>Work with Google Lighthouse in Chrome with browser extension</li> <li>Conclusion</li> </ul> <h2> What is Google Lighthouse </h2> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Vt8T4c1c--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xksjdkfh7p0zy2ei8sk7.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Vt8T4c1c--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xksjdkfh7p0zy2ei8sk7.png" alt="Image description" width="531" height="215"></a><br> Each report provided by this tool has five parts: </p> <ul> <li>Performance</li> <li>Accessibility</li> <li>Best Practices</li> <li>SEO</li> <li>Progressive Web App</li> </ul> <p>Each of these sections gives you a score from zero to one hundred for reviewing web pages, so you can understand your strengths or weaknesses in each section. Google Lighthouse first examines each section and gives you a score. Google Lighthouse has a feature to click on the desired section for a better and more accurate analysis of your page and see more details. After analyzing and fixing the weaknesses of the website, you can re-analyze your page with this tool and watch the process of improving your website.</p> <h2> Speed ​​is one of the basic criteria </h2> <p>In fact, Google Lighthouse metrics help you understand how fast a website loads and how long it takes for a user to interact with the website. Note that website loading speed is very important in how users interact with your website. To better understand this issue, consider the following:</p> <ul> <li>Many users say that the worst part of the UI experience is the long wait for the website pages to load.</li> <li>On average, it takes about 15 seconds to load most landing pages on a mobile phone.</li> <li>On average, 70% of users spend their time on websites with a loading speed of more than five seconds.</li> <li>By increasing every second of the webpage load time, the user interaction rate decreases by seven percent.</li> </ul> <p>The statistics you see are a huge part of the UI experience. With the help of the Google Lighthouse tool, you can understand the performance and quality of your website. Also, according to the information obtained by using this tool, you can easily improve the status of your website.</p> <h2> How Google Lighthouse works </h2> <p>You might think that you can simply enter the website address in the browser search bar and then find out how fast a website is loading. But website users live in different areas and have access to other internet ISPs; even the type of search and how users use them may differ. Although most website traffic is usually from mobile devices, most users do not have access to the fourth-generation (4G) and fifth-generation (5G) Internet. For this reason, Google lighthouse performs a simulation and measures the website’s loading speed with a third-generation (3G) Internet.</p> <p>You may now be wondering why Google is doing this. Almost every website loads with very high-speed fourth and fifth-generation internet. But most users do not have access to such high-speed internet. For this reason, Google considers the majority of users and tests websites with a three-generation Internet speed. Since Google has a similar algorithm that scans such websites, you should check your website in the same way. Google lighthouse tools will help you to do this.</p> <h2> PageSpeed ​​Insights vs Google Lighthouse </h2> <p>The PageSpeed ​​Insight tool focuses only on the performance of your web pages. Still, as mentioned, the Google lighthouse tool has the ability to analyze performance, accessibility, best practices, SEO, and advanced web applications. Although the Google lighthouse tool analyzes the website more accurately and completely, what is the purpose of the PageSpeed ​​Insights tool?</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--b0oxf40i--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i57jkplffh8pw4c3vfq9.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--b0oxf40i--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i57jkplffh8pw4c3vfq9.png" alt="Image description" width="820" height="273"></a></p> <p>In fact, PageSpeed ​​Insights scans the website using real-world data, while the Google lighthouse tool scans the website based on a comprehensive scan and does not necessarily use real-world data to analyze the site. Therefore, it can be said that the PageSpeed ​​Insights tool is more suitable for checking the website’s performance.</p> <h2> How to work with Google Lighthouse </h2> <p>There are two ways to use this tool, both of which are very simple, easy, and understandable so that any website administrator with any amount of technical knowledge, can use this tool well. Follow us to get acquainted with two ways to do this.</p> <h2> Work with Google Lighthouse in Google Chrome </h2> <ol> <li><p>First, open your desired website in the Google Chrome browser.</p></li> <li><p>Right-click on the website page and click Inspect (or you can press the F12 key on the keyboard).</p></li> <li><p>From the tabs, click on the Lighthouse.</p></li> <li><p>From the Device section, specify that you want to evaluate the website’s performance on mobile or desktop.</p></li> <li><p>Click the Generate report button to review and analyze the website.</p></li> </ol> <h2> Work with Google Lighthouse in Chrome with browser extension </h2> <p>Search for the word <strong>Lighthouse</strong> in the <a href="https://chrome.google.com/webstore/category/extensions?utm_source=chrome-ntp-icon">Chrome Web Store</a>.</p> <p>Click on the first plugin (Lighthouse) as shown.<br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--PCb7KCmM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qiysvrps8wu9kcej4z1m.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--PCb7KCmM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qiysvrps8wu9kcej4z1m.png" alt="Image description" width="880" height="423"></a></p> <p>Click the Add to Chrome button to install the plugin.<br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--HP3aw27X--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r2fwswyfmawvnd91n0th.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--HP3aw27X--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r2fwswyfmawvnd91n0th.png" alt="Image description" width="880" height="423"></a></p> <p>A window will open, click the Add extension button.<br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--pYpuqEI_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w5eftws242ql3wka7ync.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--pYpuqEI_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w5eftws242ql3wka7ync.png" alt="Image description" width="447" height="112"></a></p> <p>Enter your desired website.</p> <p>In the upper right corner of your browser, click on a puzzle-like icon.</p> <p>Click on the Lighthouse plugin.</p> <p>To specify the desired device, click on the gear icon, and select the desired device.<br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--mUX5pAIz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yjobqcpg14k0i11dkqt5.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--mUX5pAIz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yjobqcpg14k0i11dkqt5.png" alt="Image description" width="270" height="385"></a></p> <p>Click the Generate report button to analyze and review the website.<br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Ny_UBmb---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2kxlk00hk06fkfbafpu9.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Ny_UBmb---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2kxlk00hk06fkfbafpu9.png" alt="Image description" width="880" height="186"></a></p> <h2> Conclusion </h2> <p>as you see, you can easily check and analyze the quality of the website in the shortest possible time using the powerful Google Lighthouse tool. In addition to helping you rank well in search results, this tool also provides important information about the website’s user experience. The user interface experience is a very important factor for Google, and it is certainly an important issue for a webmaster who should take it seriously.</p> <p>Good Luck🍀</p> <p><strong>Thank you for being with us until the end of this article. If you liked this article, do not forget to like and follow.❤</strong></p> googlelighthouse seo Mazdak Wed, 01 Dec 2021 11:14:25 +0000 https://dev.to/mazdak23/quick-response-to-instagram-comments-with-facebook-inbox-180a https://dev.to/mazdak23/quick-response-to-instagram-comments-with-facebook-inbox-180a <p>Our specialty is not Instagram and Instagram Marketing. Because we believe that you should have a website for continuous sales, Instagram is a marketing channel and should not be used as the core of a business. But the way we use every day to respond to Instagram comments is exciting. That’s why we decided to share this trick with you. With the lure of responding quickly to Instagram comments, you will not miss any words, and you no longer need to use the Instagram app to respond.</p> <h4> Table of Contents </h4> <ul> <li>Quick response to Instagram comments</li> <li>A magic trick to respond quickly to Instagram comments</li> <li>Autoresponders</li> <li>Conclusion</li> </ul> <h2> Quick response to Instagram comments </h2> <p>It is usually challenging to respond to all Instagram comments. Many people hire an admin to do this to respond to all comments. The quick answer means answering frequently asked questions, and you want to answer them all in the shortest possible time. Join us now to learn more about this topic.</p> <p>In the section called Comment, you can reply to your Instagram comments. When you enter this section, you will see and review the list of all Instagram posts in the order of the last statement sent to you on Instagram. For example, you may have posted a post a month ago and may not be able to respond to comments. As a result, by entering the Comment section, you can quickly reply to all comments.</p> <h2> A magic trick to respond quickly to Instagram comments </h2> <p>This trick does not require the installation of any software. As a result, we can very quickly respond to comments separately and in one panel through the main Facebook website, the so-called parent company of Instagram. To do this, first, go to Facebook.com/YourUsername/inbox and then connect your Instagram account to Facebook.</p> <p>Of course, you have to change your Instagram page to business mode. To do this, all you have to do is log in to your Instagram page on Facebook and enter your Facebook.com/YourUsername/inbox. This site has some exciting features that most Instagram users and Instagram teachers have not talked about. But you can manage different parts of your account in the menu on the left side of the site.</p> <p>You must enter your account name at Facebook.com/YourUsername/inbox instead of your username.</p> <h2> Autoresponders </h2> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--nd6uaDN5--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5daubuuzw2ujtjff4uln.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--nd6uaDN5--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5daubuuzw2ujtjff4uln.png" alt="Image description" width="880" height="480"></a>Another item in this section is Automated Responses. You can use it to define ready-made answers for your page easily, or even when you are offline on Instagram, it allows you to send a default message to your users and ask them to be a little patient, and You will answer them in a few hours.</p> <p>One of the big problems for Instagram users who produce content and have a page on Instagram is that when they check for new comments, they first enter the Activity section, where followers, comments, and likes are visible and not separated. This will prevent you from replying to any comments significantly when page followers increase.</p> <h2> Conclusion </h2> <p>There are several significant problems with using the Instagram app on mobile. For example, people who produce content need a lot of focus. Using a mobile phone allows you to check other people’s pages when you log in and want to review your comments. As a result, you lose many hours of your most valuable daily time. As a result, we suggest that you use your computer browser to manage your Instagram page much more quickly.</p> <p><strong>Thank you for being with us until the end of this article. If you liked this article, do not forget to like and follow.❤</strong></p> instagram facebook comments quickresponse Mazdak Wed, 01 Dec 2021 10:29:31 +0000 https://dev.to/mazdak23/9-best-vs-code-extensions-5dpb https://dev.to/mazdak23/9-best-vs-code-extensions-5dpb <h2> <a href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer">1. Live Server</a> </h2> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--rngSzJZv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/frb7d2tnq3orjiihvi3t.gif" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--rngSzJZv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/frb7d2tnq3orjiihvi3t.gif" alt="Image description" width="880" height="471"></a></p> <h2> <a href="https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight">2. Color Highlight</a> </h2> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--UwgVcEB7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1gsfalaeyohji9iqg82j.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--UwgVcEB7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1gsfalaeyohji9iqg82j.png" alt="Image description" width="880" height="492"></a></p> <h2> <a href="https://marketplace.visualstudio.com/items?itemName=nadim-vscode.html-meta-tags-hero">3. Html Meta Tags Hero</a> </h2> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--V4Agnbix--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/36w4qv5a8lyaef4uxclv.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--V4Agnbix--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/36w4qv5a8lyaef4uxclv.png" alt="Image description" width="512" height="288"></a></p> <h2> <a href="https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme">4. Material Icon Theme</a> </h2> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--6BwxleWQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hb6049dx49iti4m5u7dv.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--6BwxleWQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hb6049dx49iti4m5u7dv.png" alt="Image description" width="880" height="418"></a></p> <h2> <a href="">5. Auto Rename Tag</a> </h2> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--1v-9Lkkq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sdg5ozqituiwbspzn41t.gif" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--1v-9Lkkq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sdg5ozqituiwbspzn41t.gif" alt="Image description" width="880" height="573"></a></p> <h2> <a href="https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare">6. Live Share</a> </h2> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Px0CpOCB--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mi3o14zqri9yectarie8.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Px0CpOCB--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mi3o14zqri9yectarie8.png" alt="Image description" width="880" height="529"></a></p> <h2> <a href="https://marketplace.visualstudio.com/items?itemName=ExodiusStudios.comment-anchors">7. Comment Anchors</a> </h2> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--99bipACl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2nv5sq1ofh475cle0tgy.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--99bipACl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2nv5sq1ofh475cle0tgy.png" alt="Image description" width="880" height="443"></a></p> <h2> <a href="https://marketplace.visualstudio.com/items?itemName=dracula-theme.theme-dracula">8. Dracula Official</a> </h2> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--X3Y9y7qm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/564gamkhe1ym073offsy.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--X3Y9y7qm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/564gamkhe1ym073offsy.png" alt="Image description" width="880" height="911"></a></p> <h2> <a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode">9. Prettier-Code formatter</a> </h2> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--5XKmFeFP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nawsrstyiafv2burjdlk.gif" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--5XKmFeFP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nawsrstyiafv2burjdlk.gif" alt="Image description" width="880" height="375"></a></p> <p><strong>Thank you for being with us until the end of this article. If you liked this article, do not forget to like and follow.❤</strong></p> Mazdak Wed, 01 Dec 2021 09:31:16 +0000 https://dev.to/mazdak23/best-chrome-extensions-for-web-developers-2ja5 https://dev.to/mazdak23/best-chrome-extensions-for-web-developers-2ja5 <p>Chrome extensions are very useful for developers and designers, some of these extensions enhance the abilities of developer tools, some replicate the features in developer tools. Every extension in the chrome marketplace are valuable in certain scenarios but instaling all of them is not a wise thing. Among many extensions, there are extensions available for web developers and web designers. Few worthy extensions are listed in this article to help out the new developers and designers.</p> <h2> <a href="https://chrome.google.com/webstore/detail/grammarly-for-chrome/kbfnbcaeplbcioakkpcpgfkobkghlhen?utm_source=chrome-ntp-icon">1. Grammarly</a> </h2> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--FrwN2lQ4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bt0kpgzwn9e1qxmi6o0j.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--FrwN2lQ4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bt0kpgzwn9e1qxmi6o0j.png" alt="Image description" width="880" height="461"></a>From grammar and spelling to style and tone, Grammarly helps you eliminate writing errors and find the perfect words to express yourself.</p> <h2> <a href="https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?utm_source=chrome-ntp-icon">2. ColorZilla</a> </h2> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--wQYfXppz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8zho5b77eygv6ogzxbbg.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--wQYfXppz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8zho5b77eygv6ogzxbbg.png" alt="Image description" width="880" height="587"></a><br> ColorZilla is an advanced and most popular color picker and eye dropper tool for both chrome and firefox.</p> <h2> <a href="https://chrome.google.com/webstore/detail/page-ruler-redux/giejhjebcalaheckengmchjekofhhmal?utm_source=chrome-ntp-icon">3. Page Ruler Redux</a> </h2> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--snMX5XY2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jcqtpg9j673rhmyeee4w.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--snMX5XY2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jcqtpg9j673rhmyeee4w.jpg" alt="Image description" width="750" height="500"></a>Page Ruler Redux is a core web developer and designer tool, that allows you to get pixel perfect measurements of web elements for website front-end development, web design or any task you may need to get perfect pixel measurements of any web elements.</p> <h2> <a href="https://chrome.google.com/webstore/detail/lightshot-screenshot-tool/mbniclmhobmnbdlbpiphghaielnnpgdp?utm_source=chrome-ntp-icon">4. Lightshot</a> </h2> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--_xTaD51M--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/esditjuxvtc79yzclv7v.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--_xTaD51M--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/esditjuxvtc79yzclv7v.jpg" alt="Image description" width="880" height="553"></a>Lightshot is Simple and convenient screenshot tool. Select an area, edit your screenshot and upload it to the server.<br> Lightshot is the fastest way to take a customizable screenshot.</p> <h2> <a href="https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg?utm_source=chrome-ntp-icon">5. Wappalyzer</a> </h2> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s---_EqhVfA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0xfvbgz6cfletqmteiij.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s---_EqhVfA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0xfvbgz6cfletqmteiij.jpg" alt="Image description" width="640" height="400"></a>Wappalyzer is a technology profiler that shows you what websites are built with. <br> Find out what CMS a website is using, as well as any framework, ecommerce platform, JavaScript libraries and many more.</p> <h2> <a href="https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?utm_source=chrome-ntp-icon">6. Web Developer</a><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--lT9LN2PF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7jk02gjwcbcp90l1va9d.png" alt="Image description" width="880" height="284"> </h2> <p>The Web Developer extension adds a toolbar button to the browser with various web developer tools. This is the official port of the Web Developer extension for Firefox.</p> <h2> <a href="https://chrome.google.com/webstore/detail/dark-reader/eimadpbcbfnmbkopoojfekhnkhdbieeh?utm_source=chrome-ntp-icon">7. Dark Reader</a><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--5yG_R59x--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q4oeznb08p02sea41sm7.jpg" alt="Image description" width="640" height="400"> </h2> <p>Dark mode for every website. Take care of your eyes, use dark theme for night and daily browsing.<br> You can adjust brightness, contrast, sepia filter, dark mode, font settings and ignore-list.</p> <p><strong>Thank you for being with us until the end of this article. If you liked this article, do not forget to like and follow.❤</strong></p> webdev extension chrome developer