There are numerous web developer tools you might use as a front end developer: text editors, package managers, version control systems, and many more. But the one tool we all use is the humble web browser. It isn’t just for viewing websites, it comes with the most powerful dev tools built in as well.
Much like your other tools, these dev tools are packed with features you might not know. Not only that, but not all developer tools are exactly the same. Each of them has their own unique features that are useful in specific situations.
"Not all developer tools are exactly the same. Each of them has their own unique features that are useful in specific situations."
In this article, I’m going to discuss a few of the dev tools that I have found invaluable in my job as a front end developer. They will help with styling your clients’ websites, improving their accessibility, and hunting for bugs. Some of them you can use in all browsers, but some will be specific to Firefox or Chrome. Opening your developer tools is slightly different in each browser, but what I usually do is right-click somewhere on the page and click on “Inspect” (or “Inspect element”).
Let’s get started.
Grow Volume 2: Becoming a Full-Stack Web Design Freelancer
Get your free copy of Grow Volume 2: Becoming a Full-Stack Web Design Freelancer sent to your inbox.
By entering your email - we’ll also send you marketing emails related to Shopify. You can unsubscribe anytime. Note: the guide won't be delivered to role-based emails, like info@, developer@, etc.
Our virtual cogs are turning.
Please note that it can take up
to 15 minutes for our email
to reach your inbox.
Have you ever wondered what a button will look like when you change the text, or a bit of the content before you take a screenshot? With
document.designMode, you can set every element on the page to be editable. Go to the console tab in the developer tools and write:
document.designMode = "on"
Now, everything on the page is set to be editable, and you can play around with the page. You can even copy and paste styled content from Word or Google Docs and the styling will be copied as well.
You might also like: 4 Lesser Known but Powerful Web Developer Tools that Increase Productivity.
In the Elements or Inspector tab in your developer tools, you can view the HTML of the current page and also the CSS of those elements. But, it only shows what is currently rendered. So what do you do when you want to see, and change, the CSS when you hover over a certain element?
That’s where the pseudostate toggles come in. Select the element you want to toggle, and click on the
:hov button on top of the Styles panel. Here, you can force the element to be any state you want, and even multiple states at the same time.
Grow your business with the Shopify Partner Program
Whether you offer web design and development services or want to build apps for the Shopify App Store, the Shopify Partner Program will set you up for success. Join for free and access revenue share opportunities, developer preview environments, and educational resources.
Accessibility is still an underappreciated part of web development. Partially, this is because it can be hard to get right. Firefox tries to help with their Accessibility tab. In this tab, you can go through the document tree, much like the Inspector/Elements tab. It shows the element’s role, its name, and possible issues with it. This can be a bit tricky to navigate, but you can also right-click an element in your browser and choose Inspect accessibility properties. This will take you directly to the element in the Accessibility tab.
To easily find just the issues on your page, there’s a dropdown menu at the top of the tab next to Check for issues:. Here, you can filter which type of issues you want to view. Hover over a line, and the element will be highlighted in the browser.
This should help you improve the accessibility of the site you’re working on with minimal effort.
You might also like: Universal Design: 11 Practical Tips to Make Your Sites and Apps More Accessible.
Lighthouse is a tool built by Google for measuring the quality of web pages. It used to be stand-alone, but now, it’s also built right into Chrome’s developer tools.
Go to the Lighthouse tab, select the type of device you want to test, and click on Generate report. This will run an audit of the page you are looking at. It gives you tips on how to improve the performance, accessibility, security, and SEO. It also shows you what still needs to be done if you want to make a progressive web app out of your website.
The Network tab in Chrome’s developer tools shows you what files have been loaded and how long it took to load each one. This is great if you want to know which file is taking a long time, or why a certain file hasn’t been loaded. It can also take screenshots while your page is loading.
Click on the cogwheel icon in the top right, and select Capture screenshots. Now, reload your page, and it will capture a filmstrip of your page being loaded. If you double click on one of the screenshots, it will enlarge that screenshot, and you can also step through all of them.
This is great if you want to see what your website looks like when it takes a while to load. It can show you issues in your design, or maybe content that jumps around after an image is loaded. It’s also useful to show you how long it takes before the first meaningful paint, i.e., the first time a user sees the primary content of a page.
The Console drawer is a helpful little thing that’s active in most of the tabs. It usually shows up at the bottom of the DevTools as a Console pane, but if it’s not there, you can open it by either pressing Escape, or by clicking on the three dots on the top right and selecting Show console drawer.
By default it only shows the console, but if you click the three dots on the top left of the console drawer, it gives you a lot more tabs. One of the most helpful to me is the Rendering tab. It can help you identify different types of issues with the rendering of your site. My favorite feature here is the Emulate vision deficiencies all the way at the bottom. You can use it to emulate the experiences of users who might have blurred vision or color blindness.
The developer tools in Firefox are much better than Chrome’s when it comes to CSS. One of their most powerful features is the inspector for flex and grid items. With it, you can visualize your grid or flex items to make them easier to understand and debug. You can find it by going to the Inspector tab, and opening the layout tab on the right-hand side.
"The developer tools in Firefox are much better than Chrome’s when it comes to CSS."
If you want to inspect a flex element, select that element, and the details will open on the right-hand side. Here, you can see a visual representation of your item, and how the different sizes are calculated. For example, it could show you that an item has become smaller because it’s set to
Inspecting a grid container becomes even more interesting. Open the Grid drawer in the layout tab and select the item you want to view the details of. In your browser window, you will now see the grid lines with their numbers or names, the grid areas, and the gaps in between the items. Using this makes it much easier to see where you might have possible alignment issues.
You might also like: 30 Developer Resources to Diversify Your Skill Set.
Another nifty feature is the animation inspector. You can also find this on the right-hand side of the Inspector tab. Select an element with a CSS animation (or one of its parents), and it will show you a timeline of that animation. If you click on the timeline, a new panel will open that shows you timelines of each CSS attribute that changes in the animation. You can go back and forth to specific points in the animation to help you figure out your animation problems.
$$: These are aliases for
document.querySelectorAll. For example,
$(‘div’)will select the first
divon the page.
$_: This will return the most recently evaluated expression. For example, if you’ve written
20. So now, you can do
$_ + 10and it will evaluate to
$0: This is a reference to the currently selected element in the Element/Inspector panel. In Chrome’s dev tools,
$5also work as historical references to elements selected before.
clear(): This will clear the console history.
copy(object): This will copy an object as a string. For example,
copy($0)will copy the HTML of the currently selected element.
Not only can you see changes in certain variables, but you can also combine this with the expressions like
And many more dev tools...
These are just a few of the very useful dev tools that browsers have built-in for web developers and designers. As you can see, the developer tools can help you with a variety of different tasks that you face in your work. It can help you with performance debugging, accessibility improvements, designing your website, and much more. And, there are even more features that I haven’t covered. If you’re interested to know more, you can go to the Chrome DevTools and Firefox Developer Tools documentation sites. Or, you can follow Umar Hansa’s Dev Tips, where he mostly shares fun little tips for Chrome DevTools.
What has been your favorite feature? Or, have you used something less well-known? Share it with us in the comments below!
- Mozilla Firefox Developer Edition.
- Google Chrome.
It is difficult at first, but once you get the hang of it, it is pretty simple. However, when you start working on the frontend, there are many different aspects you need to keep in mind and be good at. First, you need to be a half-decent designer.What are the 3 primary web technologies used for front-end design? ›
Many programmers consider Python the easiest programming language to learn, although it can still prove difficult to get the hang of. There are many free online resources, Python bootcamps, and online Python bootcamps that can help you learn the language.Why do Devs use Firefox? ›
In fact, Firefox is the only browser that is specifically built with tools that help developers to build and design with their own CSS grid. These tools make it easier to visualize information, display area names, and preview transformations too.Is Linux better for web dev? ›
However, if you are thinking of getting into programming or web development, a Linux distro (such as Ubuntu, CentOS, and Debian) is the best Operating System to start with.How do I become a front-end developer in 3 months? ›
- Get Informed. That means reading articles and books about front end development. ...
- Practice. ...
- Learn the Command Line. ...
- Learn Version Control.
Node. js is sometimes misunderstood by developers as a backend framework that is exclusively used to construct servers. This is not the case; Node. js can be used on the frontend as well as the backend.Is .NET front-end or backend? ›
. Net comprises both frontend and backend languages. As for example, ASP.NET is used as backend and C# & VB.NET are used for frontend development.
Base Salary (NGN) NGN 202k. NGN 1m. NGN 6m. The average salary for a Front End Developer / Engineer is ₦1,389,081.Who gets paid more front end or backend? ›
1. Who gets paid more, front-end or backend? Backend engineers are compensated more. It is a cultural bias in software development that the front-end or "gui" is what "graphic artists" construct, whereas the back-end is where all the complex computer science theory must take place and should never be questioned.Is frontend development stressful? ›
Front-end development can be stressful at times due to its never-ending libraries, languages, and additional skills one needs to learn every day. Learning to make websites and designing them is all we are hearing about these days.What is the most popular front-end technology? ›
The most popular front-end frameworks for large-scale applications are – vue. js, react. js, angular, and smaller web applications – jquery and Backbone Js.Who is the full stack developer? ›
C++ C++ is considered to be one of the most powerful, fastest, and toughest programming languages.What are the 5 main coding languages? ›
- 1 Python. Python is the simplest language that can be learned by beginners. ...
- 2 C/C++ C/C++ is used by people who continue to work on Microsoft and Windows. ...
- 3 Java. ...
- SQL. ...
1. Python. Python can be regarded as the future of programming languages. As per the latest statistics, Python is the main coding language for around 80% of developers.Is Game Dev better than web dev? ›
Although game developers tend to have more expansive skills than web developers, they're nowhere close to running the world — or even getting paid adequately for the hours they crunch. Web developers, on the other hand, don't have it that bad. The outlook on work and life couldn't be more different in the two areas.Do Devs still use PHP? ›
In the developer's community, a lot of people started perceiving PHP as an outdated language that has no place in the IT industry by 2022. However, statistics show that around 80% of websites are still written on PHP.
Overall web development is comparatively easier than android development – however, it majorly depends on the project you build. For example, developing a web page using HTML and CSS can be considered an easier job in comparison with building a basic android application.Is web dev high paying? ›
With a median pay of $69,430 per year, web development is a well-paying job no matter what specialization you choose. Of course, the web languages you know will pay a big part in your salary and what jobs you can land.Which SQL is best for web development? ›
- The Oracle.
- MS SQL Server.
- IBM DB2.
Web developers are in demand across diverse industries.How long does it take to master front end? ›
It doesn't matter if you have some experience, limited experience, or no experience at all; you can become a front end developer within six months. Generally, the best way to upskill within this span is to enroll in a part-time coding boot camp.How many hours a day should I study Web development? ›
I recommend at least 3-hour programming sessions. And I recommend at least 2 sessions per week. Otherwise, your progress will be very, very slow.How many hours does it take to learn front-end development? ›
Both operate differently in several aspects when it comes to Backend development. PHP is more focused on being flexible and easier to work with when building a web page, while Node. js aims to be a more performant alternative that provides more options to organize your project's data.Is Node difficult to learn? ›
Currently, the most popular languages for full stack developers are Node. js, Python, C#. ASP.NET, and PHP. It's believed that the most common languages for full stack developers in future will be HTML/CSS, and some of the newer ones like AngularJS, Node.Is .NET outdated? ›
NET framework is highly outdated. Of course, the main reason behind this is the lack of cross-platform development, which was rectified in future versions released by Microsoft. Most developers and programmers prefer programming languages and frameworks that offer flexibility when working with them.Is learning C# hard? ›
C# is one of the easiest programming languages to learn. C# is a high-level, general-purpose programming language that is easy to read because of its well-defined class hierarchy. It is the perfect language for beginner developers as it will be straightforward to grasp compared to most other languages.Is Firefox dev tool better than Chrome? ›
Ultimately, the choice of browser for a web developer could easily come down to a matter of personal preference, since both Chrome and Firefox are very capable. At this point in time, Firefox Developer's Edition would seem to have a slight edge over Chromium all things considered.Which is better Chrome Beta or Dev? ›
Beta channel: To view upcoming changes and improvements with low risk, use the Beta channel. It's updated roughly every week, with major updates coming every 4 weeks, more than a month before the Stable channel gets them. Dev channel: To view the latest ChromeOS features, use the Dev channel.Which is better Chrome Dev or Chrome Beta? ›
The Beta channel gives you a 4–6 week preview of features coming to the Stable version of Chrome browser. The Dev channel gives you a 9–12 week preview.What is browser dev tools? ›
Developer tools (or "development tools" or short "DevTools") are programs that allow a developer to create, test and debug software. Current browsers provide integrated developer tools, which allow to inspect a website.Is Firefox owned by China? ›
Chrome uses much more RAM, period. To use less RAM, use Firefox. While you use chrome and there's not enough RAM, all others process would be laggy. Firefox don't take up all resources for itself when there's not enough.What site is better than Chrome? ›
The best alternative is Mozilla Firefox, which is both free and Open Source. Other great apps like Google Chrome are Brave, Vivaldi, Opera and Tor Browser.
Progressive Web Apps (PWAs) are the technological successor to Chrome Apps; they are hosted entirely on the web but behave like a desktop app (opening in a separate window, for example). PWAs will continue to be supported for use with Chrome OS devices.Which is best dev or beta? ›
Those who stick to the Dev Channel will get the most cutting edge updates, including new concepts that might never actually ship, while the Beta Channel is a bit closer to what you'll actually see in final releases, and is likely a bit more stable.Which browser is most customizable? ›
Verdict: Vivaldi is the most versatile and customizable web browser. Whichever browser you prefer, chances are it offers a lot of functionality. It's true that for every feature Firefox, Opera, and Safari have to offer, there is likely a Chromium extension that can add the same functionality.Which version of Chrome Is Fastest? ›
Google on Monday announced that its latest version of its Chrome browser for Mac, version 99, has recorded the highest speed score of any browser in the Speedometer benchmark—an Apple-created speed test.Is Chrome faster than brave? ›
The results show that Brave is faster than Chrome on Android with a score of 250.97 against 217.56 on the Basemark Web 3.0 test. We conducted the tests on the same device with all other apps closed during the testing period. Brave should be your go-to browser on Android if these numbers matter to you.Is Chrom better than Safari? ›
In fact, Safari beats Chrome on the Mac because it's more energy-efficient, better at protecting your privacy, and it seamlessly works with the Apple ecosystem.Which is best HTML debugging tool? ›
- Developer tools in modern web browsers. Every modern browser has tools available within it to debug code. ...
- The hackable debug tool — debugger. ...
- Node. ...
- Postman for debugging requests and responses. ...
- ESLint. ...
- JS Bin. ...
- JSON Formatter and Validator. ...
To open the developer tools in Mozilla Firefox: Open the browser. Press F12 on the keyboard. Optional: Press the Ctrl+Shift+I keys or click Menu > Web Development > Inspector.