Tools & Platforms
Learn more about front end development tools
Learn more about front end development tools
The best tool we have in our hands today. Since its birth, Chrome has invested a lot in its developer tools and is still improving them continuously. Each release (every 6 weeks or so) comes with its own brand new dev tool features.
The dev tools are a complete suite of diverse instruments. You can edit the DOM (HTML)/CSS in real-time, debug Javascript step by step while undertaking a deep performance analysis, even add a terminal. We recently solved some render performance issue thanks to this.
The DOM/CSS editor is an extremely powerful tool, letting you provide realtime feedback to your team, iterating fast on the UI/UX of a new feature.
The official website and the Google Developers Youtube channel both are goldmines of information. For example, the section about command-line API contains really useful commands.
You can for example copy anything to your clipboard from the console by calling the special `copy` function and pass the thing to be copied (object, function return, etc.)
A lot of great tutorials are also available on HTML5 Rocks.
On top of all this, the network tools let you understand what is really going on under the hood and optimize your loading flows, all while the timeline gives you a deeper view of what the browser does.
If you’re curious enough (like us) you can learn a lot about how a browser (and indirectly, the web) is working, letting you take back full control of your application’s lifecycle.
I personally think that if they continue to follow this path, they will definitely become the ultimate IDE (or Integrated Developer Environment) for the web offering web developers a powerful development space bundled directly into the browser.
The JavaScript Task Runner
In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes. After you've configured it through a Gruntfile, a task runner can do most of that mundane work for you—and your team—with basically zero effort.
The Grunt ecosystem is huge and it's growing every day. With literally hundreds of plugins to choose from, you can use Grunt to automate just about anything with a minimum of effort. If someone hasn't already built what you need, authoring and publishing your own Grunt plugin to npm is a breeze. See how to get started.
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
TL;DR
npm is the package manager for JavaScript and the world’s largest software registry. Discover packages of reusable code — and assemble them in powerful new ways.
Use npm to install, share, and distribute code; manage dependencies in your projects; and share & receive feedback with others.
Learn more on