Since JavaScript is such a popular language and the language used by all front end web applications in some form, there’re lots of great tools to help you write high-quality JavaScript applications easily. The ecosystem of tools gets bigger and bigger every day, and more tools are available than ever before for building and debugging JavaScript applications.
ESLint
ESLint is a linting tool that checks for code quality issues like styling, lengths of functions, etc. It is used to keep formatting code structure consistent throughout the code base and eliminate issues with inconsistent formatting, bad usage of JavaScript code like double equals and triple equals, and many other things. They can also be used to identify syntax errors and simple bugs. ESLint has a huge list of rules that it checks for and it’s configurable with a text file.
To run ESLint, we can install it via NPM either per project or globally. Configuration can be done with the file that has the list of rules to enable or disable in JSON. The file is called .eslintrc and the rule is defined per project. In the file, we have something like:
{
"rules": {
"semi": ["error", "always"],
"quotes": ["error", "double"]
}
}
This defines the rules to enable or disable and set the level of reporting. error means that it will be reported as an error. It can also be set as a warning or turned off altogether with the off option. There are also preset rules made for it like the eslint:recommended rules built into the package or the AirBNB styling rules which can be installed by use theeslint-config-airbnb Node package.
The details are located at https://www.npmjs.com/package/eslint-config-airbnb for the AirBNB package, and the default ESLint recommended rules are located at https://eslint.org/docs/rules/
As we can see from https://eslint.org/docs/rules/ there’re tons of rules in styling JavaScript code. There’re rules that are related to spacing, semicolons, arrays, new lines, indentation, case of variables, commas, etc. The list of rules you can tweak are huge.
When you run ESLint, it will go through all the rules you enabled and check the files. Then you will get a list of styling issues that it identifies and notify you of them. Also, you can set it to fix them automatically so you don’t have to. It can’t fix everything automatically, but it will try its best to do so.
Browser Developer Console
The browser developer’s console is a front end developer’s best friend. It allows you to inspect each element individual to see its computed styles, which are styles applied to the elements that are from external CSS files, inline styles, and style tags together. It allows you to see the HTML document that is rendered from the JavaScript and watch the DOM tree change as the page is changing. This is great because it allows you to see what’s changing when the page is being changed by anything. You can also pause execution or set breakpoints so that you can have time to take a close look at the change you want before the change is gone.
It’s easy to fiddle with the CSS styles before making changes in your code. This saves a lot of time because you don’t have to keep fiddling with the code and refreshing until you see what you want on the screen. To do this in Chrome developer console, we just right click on the element you want and then click Inspect. This should take us to the Elements tab, then in there, we see the Styles tab near the bottom of the screen. In there, you can enter whatever you want and then you can see what you get immediately. Whatever change you made here isn’t saved in your code, so if you want to make the change permanent, you have to copy them in your code. If you made a mess and can’t go back to what you want, you can just refresh and start over. It also has a diagram of the box model for margins and paddings and also shows all the event listeners that are attached to the element via the Event Listeners tab, which is right beside the Styles tab. There’s also the Properties tab, which has all the properties of the element you’re inspecting listed. This is great since you don’t have to add console log or do run any commands in the console to get the information. The Elements tab also lets you fiddle with the HTML of the elements directly. This is very convenient because again you can fiddle with the page structure before committing to changing anything in your code.
In the Console tab of the Chrome developer console. You can type in commands and see the output returned. The output of the console.log statements that you put in your code also shows up here when the part of the code loads. If you want to inspect the properties of global variables, you can enter the name of the global variables here and see the dump of the content of the global variable you want to inspect. There’s also the Preserve Log option for preserving the log output after you refresh, and the Autocomplete from history option to see the toggle on or off autocomplete of the code you’re typing in the console.
The Sources tab of the Chrome developer console allows you to see the built code of your web app. It also lets you put in breakpoints to build the console and see the final file structure after the code has been compiled. We can see the built CSS and JavaScript files from here.
The Network tab is also an important tab of the Chrome developer console. It shows everything that’s uploaded and downloaded between your app and the server. All HTTP requests made by your app are shown here. When you click on an entry on the left side of the tab, you see the full details of the HTTP request made by your app.
Everything from the URL it’s making the request to, to the request and response headers of the request, and the parameters that were sent to the server are all shown here. Also, the status of the request is also seen here so if we can see if the request has been made successfully and the response code if the request has made it to the server. The Preview and Response tab on the right side shows the response body from the server.
It works for any kinds of responses. The Preview shows a formatted version of it while the Response tab shows the raw version. Finally, the Timing tab lets us see how long it takes to make a request between the client and the server. There’s also graph above showing the timing of the requests. You can filter them by different kinds of requests.
The most important ones for most web apps are the XHR tab for showing the AJAX requests only, and sometimes we also want to check JS, CSS, Img or Media tabs to see if the scripts and media are downloaded correctly. There’s also the WS tab for checking WebSockets communication.
The Network tab also lets us simulate different kinds of requests from normal requests to slow and fast mobile Internet and we can even cut off the Internet without pulling the wire or disconnect from our wireless Internet connection to see what happens when our browser is offline.
Chrome’s developer console’s Performance tab lets us profile the performance of our pages. We can check this tab of Chrome’s console for the loading time of various things like downloading scripts, rendering the page, and other things. This is useful for identifying performance bottlenecks with our code.
The Application tab of Chrome’s developer console is always very useful. We can see what’s stored in Local Storage, Session Storage and the cookies of our in here. Also, we can edit them and see the impact that it makes to our app. We can also clear all the storage of the current app loaded and start over without going to the browser settings to do so. This is handy for debugging any storage-related issues.
To audit the performance and accessibility of our app, we can go to the Audits tab of the console and toggle the settings to see what happens when we change different settings for simulating what kind of the device the web app is loaded in. We can change the bandwidth from slow mobile Internet to regular fast internet. Also, we can check if our progressive web app is actually compliant with the requirements of a progressive web app.
In addition, there’s also a responsive view to simulate how your page would look if you look at it from different mobile devices. It has a few phones and tablets to choose from by default.
As we can see the Chrome developer console is one of the best debugging and simulation tools out there. Other browsers like Firefox and Edge has similar functionality but might have different names. However, Chrome developer console is one of the most comprehensive front end developer tools out there. Other Chromium-based browsers should also have something like this.
Chrome Developer Console
Framework Specific Tools
If you’re writing apps with frameworks like React, Vue.js or Angular, then you should use the framework’s command-line tools to build your project. React’s too is called Create React App. Vue.js’s tool is called Vue CLI and Angular’s CLI tool is called the Angular CLI. All 3 frameworks have tools to start your project and build it into its final product.
They also support for building them in different environments, so that you can put your environment variables in an .env file for the React Vue CLI. They can read from the environment variable files depending on the environment.
For Create React App, all your environment variable keys have to start with REACT_APP and for Vue CLI, they all have to start with VUE_APP. For building, they both can specify the environment that you can to build it in. For Angular, we can put the environment-specific variables in their own files and change angular.json to add the environment variables when you build. This is very handy since we don’t have to add extra tools to take care of this.
The Vue and Angular CLI can also run scripts to add code to add different things. For Angular, various libraries have provided an ng add command to add their own libraries in our apps. For example, NgRx store lets us run ng add @ngrx/store to add it to the app. And for Vue.js, various libraries like the Vue Electron Builder library which lets us build desktop apps with Vue.js provides us vue add electron-builder command to add their code to our own codebase. The library is located at https://github.com/nklayman/vue-cli-plugin-electron-builder.
Some command-line tools have their own specialized functionality. For example, Vue CLI can build code into web components with one command with vue-cli-service build --target wc --inline-vue . Angular CLI can create the different components in with one command like ng g component homePage to create a component called HomePage .
Finally, all the tools will build your apps for production use by minifying and obfuscating your code so that people can’t see the code in plain sight and that it’s as small as possible.
As we can see, using the command line tools that various frameworks is the way new front end apps are built now. It’s much better than creating the scaffolding of our apps manually, which is very tedious and error-prone.
JSFiddle
JSFiddle is a website that is great for fiddling with front end JavaScript code as the name suggests. It lets you quickly write front end HTML, CSS, and JavaScript code right on the home page. It also lets you add boilerplate code for the most popular libraries and frameworks like React, Vue, jQuery, and Bootstrap right on the home page. CSS preprocessors like SCSS are also supported and can be enabled with a click. You can see the output on the Result pane in the bottom right corner of the screen. This is great since it lets us make quick prototypes and snippets and save them if we make an account.
JSFiddle
JSBin
JSBin is another tool for fiddling with JavaScript code. It lets you enter HTML, CSS, and JavaScript and add popular libraries and frameworks like Angular, React, Vue, moment.js, jQuery, and many more. There’s also an output pane for seeing the results and with the Pro version we can have private snippets and Dropbox backups.
JSON Formatter and Validator
The JSON Formatter and Validator, located at https://jsonformatter.curiousconcept.com/, is handy for formatting JSON data into a human readable tree format. it’s great for visualizing JSON request and response data that we have to deal with often.
JSON Formatter
Mozilla Developer Network
The Mozilla Developer Network is one of the most comprehensive documentation websites for front end development. It has pretty everything we need to know about HTML, CSS, and JavaScript all on one website. It’s handy for knowing which APIs are compatible with which browsers. Also, it has a comprehensive functions that are included in each API. There are lots of new APIs in HTML5 so it’s one of the best go-to sites for looking up the APIs in a function. The full list of APIs spans many columns and each column is very tall, so there are lots of stuff, including experimental ones.
There’s also the References and Guides section for a long list of tutorials to learn all about front end development. It has everything from basic HTML, to animations, to basic back end development with frameworks like Django and Express. Also, it provides you with exercises and projects to do to learn the material that was covered. This actually has more complete than books that you pay for in the bookstore to learn about web development.
The URLs for the sections of the Mozilla Developer Network are the following:
- JavaScript — https://developer.mozilla.org/en-US/docs/Web/JavaScript
- References and Guides — https://developer.mozilla.org/en-US/docs/Learn
