Chrome Extensions as Full-stack Web Developer, Which I Found Useful, maybe…
As a full-stack web developer, I have to use several tools that relate to each other. There are times when developing the front page of a website, I need to know the padding size of an element, or even the button color code.
Some of the extensions below can be found in the chrome extension store (Extensions — Chrome Web Store) which I personally think are useful in the website development process
1. Debug CSS
I use this extension when I want to see the layout in wireframe mode. I can see the overall layout and grid outline of a web page. You can install it at https://chrome.google.com/webstore/detail/debug-css/igiofjnckcagmjgdoaakafngegecjnkj
2. Inspect Element
Almost the same as the previous CSS Debug Extension, but this one provides detailed information per element that we select. We can also see the value of the padding or margin property. After this extension is active in your chrome browser, you can activate it by pressing the [CTRL] + [WIN] keys for Windows OS and hovering your mouse cursor on any element on a website page. https://chrome.google.com/webstore/detail/inspect-element/flgcpmeleoikcibkiaiindbcjeldcogp
3. Wappalyzer — Technology profiler
based on the official description from the developer, this extension reads metadata on the website. This information is useful when we want to know what technology is applied to a website
Wappalyzer is a technology profiler that shows you what websites are built with.
Find out what CMS a website is using, as well as any framework, ecommerce platform, JavaScript libraries and many more.
You can see the detail at https://chrome.google.com/webstore/detail/wappalyzer-technology-pro/gppongmhjkpfnbhagpmjfkannfbllamg
4. GoFullPage — Full Page Screen Capture
In some cases, I need to show the user a full view of the web page I’m working on. Windows default print-screen feature can not meet my needs, that’s why I use this extension to capture the full picture. https://chrome.google.com/webstore/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl
5. Web Developer
When I want to experiment with the UI/UX of a website or want to test a feature that I’m developing, validation using javascript, for example, this extension can turn off javascript scripts in one click. Or I want to see the responsive design of certain pages and many other features that we can explore here. https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm
6. JSON Formatter
Of course to format the output JSON data sent from the back-end. I often use it when I want to see the type or data structure of the array that was sent. https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa
7. RestMan
Actually, I can use Postman to work with HTTP requests, but sometimes I’m too lazy to switch applications let alone just to check the connection to the API Endpoint. https://chrome.google.com/webstore/detail/restman/ihgpcfpkpmdcghlnaofdmjkoemnlijdi
8. Grepper
I just tried this feature useful about 3 months ago when I was often looking for answers on StackOverflow. The point is that Grepper quickly suggests answers to questions that we enter into search engines, Google for example, without having to open links in search results.
I find it quite useful when I just forgot how to write an if-ternary in PHP. :lol
Besides that, we can also add answers to similar questions to help other developers if they ask similar questions
https://chrome.google.com/webstore/detail/grepper/amaaokahonnfjjemodnpmeenfpnnbkco
Meanwhile, those are the only extensions that I often use as a full-stack developer, if anyone has other tools you can add them in the comments column.
Cheers, :peace
