프론트엔드 개발자를 위한 크롬 Extensions 과 Online Tools

크롬 Extensions

• CSSViewer : A simple CSS property viewer
• React Developer Tools : Adds React debugging tools to the Chrome Developer Tools
• Augury : Extends the Developer Tools, adding tools for debugging and profiling Angular applications
• Vue.js devtools : for debugging Vue.js applications
• JSON Viewer : The most beautiful and customizable JSON/JSONP highlighter that your eyes have ever seen
• Library Sniffer : Sniff web framework and javascript libraries run on browsing website
• Web Developer : Adds a toolbar button with various web developer tools
• ColorPick Eyedropper : A zoomed eyedropper & color chooser tool that allows you to select color values from webpages and more
• CSS Peeper : Extract CSS and build beautiful styleguides
• WhatFont : The easiest way to identify fonts on web pages
• User-Agent Switcher for Chrome 

 

Online Tools

• Bit.dev : code components 공유 사이트
• CanIUse : makes it easy for you to test a Web API for browser compatibility
• Minify : To reduce the bundle size
• Unminify : This tool reverses what minify does
• Stackblitz : The online code editor for web apps
• JWT.io : JSON Web Token is a compact URL-safe means of representing claims to be transferred between two parties
• BundlePhobia : helps you find the performance impact of adding a npm package to your front-end bundle
• Babel REPL : we can transpile ES6+ code to ES5
• Prettier : Prettier is an opinionated JS code formatter
• Postman : This tool helps with a quick test of your API endpoints
• JSLint : This online tool version of the JSLint enables us to lint a piece of JS code or a JS file in our browser.
• Storybook : open source tool for developing UI components in isolation for React, Vue, and Angular