( Large preview)Ī clean browser profile that includes various tools for checking accessibility, e.g. Dedicated browser profiles for accessibility testing, debugging, performance audits and checking the experience for happy and unhappy customers. We usually work with at least 5 user profiles, each with its own extensions, bookmarks, bookmarklets and features turned on or off. When it comes to profiling a website for performance, or tracking a particular accessibility issue, we’ve been creating separate browser profiles for each task for a while now.
![firefox refresh page even when paused in debugger firefox refresh page even when paused in debugger](https://blog.openreplay.com/static/dcc4481062056c1ce4a2117c104ac694/2c643/code-coverage.png)
We’ll focus on the ones that we use frequently on SmashingMag, and some of the little techniques and strategies that help us fix pesky bugs and write better code. We’ll look into all modern browsers (Chrome, Firefox, Edge, Safari) and look into the useful tools that they provide to us, web developers. In this article, let’s dive into some of the useful and obscure features in DevTools. Still, DevTools has plenty of obscure gems and undiscovered treasures, living on the remote fringes of hidden tabs and experimental settings. Over the years, it has become a tool for debugging, profiling, auditing and even prototyping - all living within the same interface, and always just a keyboard shortcut away. Out of all the tools available at our fingertips these days, DevTools is probably one of the most advanced ones. In this article, Vitaly reviews useful features and shortcuts for debugging in Chrome, Firefox, Edge and Safari. Chrome does this and I find it so useful it prevents me from using FF.DevTools is very advanced and helpful, but can also be very intimidating and overwhelming. When I inspect an element and want to jump to a particular rule in the CSS it always expands to the first line of the file only and not whatever line that rule would be on in the uminified version of the file. In any case If I had some feedback for the team working on FF dev tools it would be to implement expand to unminifed line number on minified css and js. Although I think Canary is presented as a somewhat unreliable beta-ish version of Chrome whereas I had believed that FF Dev edition would have the same rendering engine as the equivalent FF standard, so long as they where the same version number. I can't recall exactly but I'm pretty sure I had a similar experience with Chrome Canary vs regular Chrome too. Now I know its not fair to make a judgement based on a single bug, too many variables at play etc but the lesson I learnt as a stressed out, time-pressured developer is not to ever ever ever use a browser that wasn't the standard version of a browser for development, the one most likely to be used by the client or end-user. It was driving me mad.Īfter an hour or so of frustration I realised that the bug did not occur on Chrome or Firefox "Standard" Editions and was only occuring on Firefox Developer Edition.
![firefox refresh page even when paused in debugger firefox refresh page even when paused in debugger](https://i.stack.imgur.com/KZzbO.png)
I was presented with a very weird UI bug from the client that I could not reproduce whatsoever. This comes from a place of love, and I'll still always use FF over Chrome, but I really have to ask if anyone else experiences the same issues, or if it's perhaps my setup/code that causes the problems?Ī few years ago, while working at an agency, I was using the Firefox Developer Edition to build the front-end for a website.
Firefox refresh page even when paused in debugger code#
A few examples I frequently experience:ġ) Stepping through TS frequently switches back to the source JS.Ģ) Breakpoints don't always go away, and sometimes a page reloads with an invisible breakpoint, that stops the code, but doesn't show up in the list of breakpoints, and doesn't seem to be removable.ģ) Breakpoints don't always stop at the the right place.Ĥ) After having the tools open for a while, the tab starts freezing for multiple seconds every few seconds (GC, according to the perf tab, so it's either my code or the dev tools) It's something I noticed especially when they switched to React. You know, I've been using Firefox Dev Edition since it was Firefox Aurora (or Beta, I guess?), and it's great to hear that they are improving the dev tools! But I have to ask this in the nicest way possible: does anyone else think the tools just don't work a lot of the time?