From d2e2020442c9473968ff4c87394135aaa23ca6fe Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Wed, 18 Mar 2020 12:37:31 +0200 Subject: [PATCH] Add a blog for chrome extensions for webdevs --- .../7-chrome-extensions-for-web-developers.md | 33 +++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 blog_posts/7-chrome-extensions-for-web-developers.md diff --git a/blog_posts/7-chrome-extensions-for-web-developers.md b/blog_posts/7-chrome-extensions-for-web-developers.md new file mode 100644 index 000000000..691718936 --- /dev/null +++ b/blog_posts/7-chrome-extensions-for-web-developers.md @@ -0,0 +1,33 @@ +--- +title: 7 essential Chrome extensions for web developers +type: list +tags: devtools,webdev +authors: chalarangelo +cover: blog_images/10-vs-code-extensions-for-js-developers.jpg +excerpt: Google Chrome's developer tools are nothing short of amazing. Here are 7 must-have extensions you can add to increase your productivity even further. +--- + +Google Chrome's developer tools are nothing short of amazing, but there are a few missing tools that can increase your productivity even further. Here are my personal favorite extensions that I use everyday: + +1. CSS Peeper +[CSS Peeper](https://chrome.google.com/webstore/detail/css-peeper/mbnbehikldjhnfehhnaidhjhoofhpehk?hl=en) is an all-in-one tool for CSS inspection that allows you to quickly peek at the styles, fonts, color palettes and assets of any website you want. + +2. React Developer Tools +[React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) is the de facto extension when working with React, providing all the necessary inspection tools for your React applications. + +3. LastPass +[LastPass](https://chrome.google.com/webstore/detail/lastpass-free-password-ma/hdokiejnpimakedhajhdlcegeplioahd?hl=en) keeps your accounts and API keys secure, by providing a free password manager complete with password generation and password-protected notes. + +4. uBlock Origin +[uBlock Origin](https://chrome.google.com/webstore/detail/ublock-origin/cjpalhdlnbpafiamejdnhcphjbkeiagm?hl=en) is a simple yet effective ad blocker extension that you can just install and forget about, as it keeps your browsing experience ad-free. + +5. VisBug +[VisBug](https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc?hl=en) allows you to tweak website designs on the fly, using very intuitive controls and tools, without having to delve into any code at all. + +6. JSON Viewer +[JSON Viewer](https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh?hl=en) provides some much needed syntax highlighting and style customization to JSON responses, which are nowadays very commonplace in most web APIs. + +7. EditThisCookie +[EditThisCookie](https://chrome.google.com/webstore/detail/editthiscookie/fngmhnnpilhplaeedifhccceomclgfbg?hl=en) is a powerful cookie manager extension, that allows you to add, delete, edit and even export and import cookies quickly and efficiently. + +**Image credit:** [Fotis Fotopoulos](https://unsplash.com/@ffstop?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/code?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)