Chrome vs Firefox DevTools

Opening DevTools

Similar in both the systems - Press F12 for opening the DevTools

Having a custom snippet

1. Snippets are small scripts that you can write temporarily and execute within Source panel
2. Chrome has the support of writing snippets whereas firefox does not support the same
3. For Accessing : Go to Chrome > Sources > Right Click more options > select snippets

Flex Box & Grid Debugging

1. When it comes to CSS debugging firefox is more advanced
2. Flexbox and Grid are separately visible when you inspect from the firefox DevTools
3. In Chrome, the only way to do this, Is by adding temporary properties in the element style column
4. Whereas, In Firefox you can see a separate column for flexbox and grid debugging

Animation Debugging

1. CSS animations and transitions are always good to be implemented but also hard to get right, firefox has a great debugging feature with animation debugging

2. Where you can play/pause/rewind animations, jump to a specific point in the animation

3. You can also adjust the animation playback speed.

4. Inside Chrome

   1. You can play/pause/rewind the animations in chrome devtools, but you cannot manipulate them.
   2. Available in More tools > Animations

5. Inside Firefox

   1. You can play around with pause/play/rewind options
   2. Adjust the playback rate of each animation

Font Debugger

1. Apart from the flexbox and animations, font selection is a very important property for a web page
2. Firefox comes prepared with a dedicated debugger for the fonts as well, where you can use all the properties by just adjusting them with the panels

LightHouse

1. Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more.
2. Open Lighthouse from DevTools and click analyze page – it’ll return an audit report based on the performance of your web page, can find which part of your performance is affected.
3. You can also run Lighthouse from the command line by a node module package
4. npm –save lighthouse
5. This is not available with firefox

Recorder

1. Chrome’s new Recorder tool allows you to record and replay tests from the browser, export them as a JSON file (and more), as well as measure test performance.
2. We can replay the recording whenever we want to check the flow
3. Once you start recording, all the user interactions are recorded, after stopping the recording, we can replay and check the performance insight for a detailed overview of the flow
4. For Accessing - More Tools > Recorder

Changes

1. This Tab will show whatever changes we made in our code on the debugging tool.
2. Changes in CSS which were done in element.style will be displayed under the Changes panel.
3. The difference in the output will be highlighted.
4. For Accessing : ctrl + shift + p then type show changes, only available in chrome.
5. More on Developers doc

Coverage

1. The Coverage Tab helps the developers to find the unused Javascript and CSS codes.
2. By doing this, we can speed up our page load.
3. For Accessing : ctrl + shift + p then type show coverage, only available in chrome.
4. More on Developers doc

Issues

1. The Issues tab puts on a notification in the Console indicating a problem found by the browser.
2. The problems involve cookies & multiple contents accessing by the same component.
3. Suggestions will be provided for enhancing the performance based on the problem.
4. For Accessing : ctrl + shift + p then type show issues, only available in chrome.
5. More on Developers doc

Memory Inspector

1. Memory inspector shows us the Array Buffer and Web Assembly buffer data
2. buffer is a way of handling streams of binary data where in Node.js it is available in a global object.
3. ArrayBuffer is an object which represents a fixed length raw binary data buffer.
4. Set a breakpoint by opening the Sources panel in the js file and check the memory inspector, it reveals a hexadecimal address.
5. For Revealing : More options > Memory Inspector > Right click the breakpoint > Reveal the memory inspector, only available in chrome.
6. More on Developers doc

Network Conditions

1. This Tab lets you control the network throttling speed.
2. For Accessing : ctrl + shift + p then type show network conditions, only available in chrome.
3. More on Developers doc

Network request blocking

1. This feature is useful to compare pages without and with some files by blocking the request before it reaching it reaches the server.
2. By doing this, you can know how your page performs when blocking resources from an entire domain.
3. How to use this feature?

   • Right-click on a resource in the Network Panel.
   • Select Block request URL - this resource is now excluded from subsequent page loads.
4. The blocked request URLs will be available under this tab for reference.
5. For Accessing : ctrl + shift + p then type show network request blocking, only available in chrome.
6. Know more here
7. This feature exists only in chrome

Performance Monitor

1. This feature gives you real-time performance results on CPU usage, JS heap size, event listeners and more.
2. They even allow you to measure the performant of your CSS solutions.
3. For Accessing : ctrl + shift + p then type show performance monitor, only available in chrome.
4. Know more here

Rendering

1. The Rendering tab comes with more features packed, It discovers rendering performance issues.
2. The green box will appear on Spot painting, and layout shifts.
3. We can even test pages with different CSS without manually specifying them in your code or testing environment.
4. You can even apply other features such as Highlighting ad frames, emulating focus on a page, disabling local fonts and image formats, enabling an automatic dark theme, and emulating vision deficiencies.
5. For Accessing : ctrl + shift + p then type show rendering, only available in chrome.
6. More on Developer doc

Search

1. We can use this tab for searching text across all loaded resources.
2. The Search tab doesn't show results from network headers and responses.
3. For Accessing : ctrl + shift + p then type show search, only available in chrome.
4. More on Developer doc

Sensors

1. With this feature, you can overwrite the current location and you can also simulate device orientation.
2. Many websites take advantage of user location to provide a relevant experience for their users.
3. So, If you're building a UI based on user location, you want to make sure the site behaves properly across the different locations.
4. For Accessing : ctrl + shift + p then type show sensors, only available in chrome.
5. More on Developers doc

Web Audio

1. The Web Audio helps to monitor the web apps that use web audio API.
2. Web Audio API provides a powerful system for controlling audio on the web, allowing developers to choose audio sources, add effects to audio, create audio visualizations, apply spatial effects such as painting and much more.
3. For Accessing : ctrl + shift + p then type show WebAudio, only available in chrome.
4. More about Web Audio API

Web Authn

1. Use the WebAuthn tab in Chrome DevTools to create and interact with software-based virtual authenticators.
2. It's more like a virtual authentication.
3. For Accessing : ctrl + shift + p then type show WebAuthn , only available in chrome.
4. More on Developers doc

Chrome Options

Summary

Tool	Chrome	FireFox	Accessibility	Preferable
Custom snippets	✔	❌	Chrome > Sources > More options > snippets
Flex Box & Grid Debugging	❌	✔	Firefox > press F12 > Grid
Animation Debugging	✔	✔	Chrome > More tools > Animation Firefox > F12 > Animation
Font Debugger	❌	✔	Chrome options
LightHouse	✔	❌
Recorder	✔	❌
Changes	✔	❌
Coverage	✔	❌
Issues	✔	❌
Memory inspector	✔	❌
Network conditions	✔	❌
Network request blocking	✔	❌
Performance monitor	✔	❌
Rendering	✔	❌
Search	✔	❌
Sensors	✔	❌
Web Audio	✔	❌
Web Authn	✔	❌

References

• Chrome DevTools
• Firefox DevTools
• Developer doc
• Web Audio API
• Developers doc