captainbrosset / devtools-tips

A collection of useful cross-browser DevTools tips

DevTools Tips

A collection of nice and simple cross-browser tips and tricks to get you more comfortable and productive with using DevTools.

More information about why I started this project over on my blog.

Contributing

You can help us in many different ways:

• let your friends know about the site
• file new issues if you notice a problem and have an idea for a new feature
• fix bugs on the site
• improve the design and features of the site
• improve existing tips
• even better, write new tips

See the contribution documentation to learn more.

devtools-tips's Issues

Create collections

Right now the tips are in reverse creation time order, like a blog. You can also look at categories, but there are only a few broad categories, and the tips there are also in reverse creation time order.

In addition to this "feed" of tips, I'm proposing to add collection pages.

A collection page contains a collection of tips that are all relevant to a specific debugging scenario. Collections can be time-based (e.g. advent calendar of CSS debugging, perf debugging week).

Line break bug with long code lines

See report here https://twitter.com/januariopinto_/status/1408111767469842432?s=21

Consider adding Safari and Polypane to the new print media emulation tip

I just added this new tip: https://devtoolstips.org/tips/en/debug-print-css-styles/

I think this feature also works on Safari and Polypane, but I have no way of testing right now.
Would someone please test and, if the feature is indeed supported, submit a PR to add the necessary docs?

Re: Take HD screenshots

Tip:
https://devtoolstips.org/tips/en/take-high-res-screenshots/

Similar to Firefox, I discovered even the Chromium browsers allow you to select a Device-pixel ratio to take HD screenshots. Perhaps this is more inline with how Firefox does it. Should I add a PR to replace the existing trick for Chromium browsers?

Rewrite image alt texts

Many of the alt texts start with "Screenshot of" or "GIF of", which is essentially meaningless information, and annoying when a screenreader already says "Image:".

Removing the text results in a perfectly readable alt text that's shorter and conveys the same information:

1. "Screenshot of a page in edge with the DevTools Sources paused at a location, and the on-page overlay preventing access to the page"
2. "Screenshot of a styled console message in Edge"
3. "Screenshot of the color vision simulation drop-down in Chrome"

Becomes

1. "A page in edge with the DevTools Sources paused at a location, and the on-page overlay preventing access to the page"
2. "A styled console message in Edge"
3. "The color vision simulation drop-down in Chrome"

Add a RSS feed that lists tips

Make a devtools browser extension with this data

This could be a new panel, with the full list of tips, filtered by the target browser.

"Emulate idle detection states" exists in Edge?

The Sensory option to emulate Idle states also exists in Edge right?

Never pause at exceptions

Right click on the line > Never pause here, seems to be a simpler & straight forward alternative to handle abusive debugger statements. Thoughts?

Remove first H1 and up all headers

Tip titles are H2s, even though they're the most important thing on a tip page.
That's because I decided to wrap the page logo/title in a H1.

Let's remove this H1, keep it as a simple devtoolstips link, and use H1 for the actual title of the tip.
This will then make it possible to move all other headings by one level.

Twitter embeds not working on category pages

When looking at a category such as Productivity, some images are missing and instead show as a plaintext link. Looks like it might be related to the rendering of Twitter embeds. Once the card is clicked and the browser navigates to the page for that tip, the embed renders correctly.

Add a dev flag to disable the service worker when working locally

This would avoid having to force-reload the page all the time.

PWA

It'd be great to make the app installable so people can more quickly go back to it. Service workers could be used to also store the already visited tips for offline use.

Make images clickable too

In tip list pages, you need to click on either the tip title or the "read more" link. Being able to click the image would be great too.

Copy an element's JavaScript path

I think this is also available in Firefox & Safari, albeit named differently, which copies the CSS selector, and can then be used in document.querySelector(<path>). I'm not sure if you're planning to have a separate feature to copy CSS selector.

Added related tips

At build time, we should try to find related tips for each tip and append a section at the bottom of each tip's page that lists them. This would make it easier for users to keep learning about devtools without having to go back to the home page or use the category menus.

Add devtools-tips to Store.app

https://store.app/ is like an App Store for PWA apps. It'd be nice to have Devtools tips added to the store front. It involves domain verification, so only the owner of the domain can submit the app.

Emulate idle detection states" for Edge?

This also exists in Edge right?

Ignore JS code in Edge

I may be missing something, but I didn't find the "Mark as library code" option in Edge as instructed in the highlighted section below. I can see "Add script to ignore list" option similar to what Chrome has. Can you check?

Improve performance by resizing/converting images

Images tend to be quite big, but they're mostly shown at small sizes on the site.

They appear at max ~450 pixels in the various lists of tips.
And at max ~800 pixels in a tip page.
Only when you click on the image do you see it full size.

We should therefore generate thumbnail versions of all images (at 450px and 800px) at build time, preferably as WebP format, and then use these instead of the original images.

The Image plugin should be able to do this: https://www.11ty.dev/docs/plugins/image/

Doing this would have the biggest impact on the load performance of the website.

Add images to tip summaries

When tips are displayed on the home page, or on the browser or tag pages, we only show the title now.

It would be great to show (at least part of) the image too, so it's faster to recognize what a tip is about.

Implement a real search field

For now the search field on the site loops through all of the tips titles and matches a single character sequence. This isn't great.
It would be good to have some kind of fuzzy matching and also match on the content of the tips, not just the title.
It would also be good to avoid having to download the entire list of tips from the start, on every page, to do so, as this does not scale.

Hacker News feedback

Some good feedback on Hacker News: https://news.ycombinator.com/item?id=37319666

It would be good to go through it and identify what would make sense to apply to the site.

I like the idea, but I'm not certain how to make it useful beyond "casual reading about devtools". The very first tip I see is "Customize the way objects look" which is ok... cool you can do that, is this where it should start?

Also, it seems Safari only got a handful of tags and many of its unique (and very useful) features are missing completely from the list.

The very first tip I see is "Customize the way objects look" which is ok... cool you can do that, is this where it should start?

Seeing the first page, it feels like it could be useful, but I don't know how to make it useful to me.

Maybe it's lacking some kind of starring system? A "most starred tips" page would definitely be useful.

I think it would benefit from a rating system and a sort or filter based on that rating.

I think something that could help a lot of people would be a browser devtool comparison page. You can take your existing browser tags and show which devtool features exist on each browser. Personally, I would 100% use a guide like that to decide which browsers tools suit my needs.

The design of this page makes me feel it is all ads. A list of one ad after another.

It's too busy with too many elements trying to get the user's focus I think. Small tips: Remove the underline from the title of the "tip" and increase the margin between the tips themselves by a small amount. Maybe adjust the background color of a tip as well. Would make it look like this: https://i.imgur.com/m1WqTBU.png

on mobile, the images could be under the title rather than under the tags, and they could have the same width as the other elements.

The colours and text/image distribution remind me the low quality ads that appear at the bottom of some news places that simply it's a bunch of clickbait

Yes (looking at it from mobile), I think it's because of the fact that the images sit below the tags and there are no separator lines. My brain just doesn't get the connection between the title/text/tags block and the image at first glance, so it jumps to the conclusion that the image is an ad and not worth looking at.

Yes same, the google blue + the crispy image, it does reminds me of the old days.

Yes. I have this sudden urge to look for the ad close (x) button for some reason. I think it's the lack of a solid border, or box-shadow, or perhaps the lack of padding of the images. I'm not really sure.

Chrome supports other languages for DevTools

Re: https://devtoolstips.org/tips/en/use-another-language/

Chrome has pretty wide support for non-English languages. Arguably more than any other browser vendor. Should we add Chrome in the list of supported browsers?

Provide more navigation affordances

Once a tip page, you can't go anywhere else easily. You have to use the navigation menu to either go back to the full list, or go to one of the browser or tag pages.
We should complement this with, at least, a simple prev/next navigation at the bottom of the tip. The previous and next tip should appear as a little preview, just like on a tips list page, to make it enticing for people to continue learning.

Add meta tags for better social media embedding

We should add the right meta tags to the site so that tips get nicely previewed when embedded in social media apps.
See this guide: https://css-tricks.com/essential-meta-tags-social-media/

Search results are hidden below article contents

When doing a search on the homepage, the results drawer is below the contents of the articles.

This appears to be related to the addition of a view-transition-name which creates a new stacking context, so it is likely only an issue in browsers supporting the View Transitions API.

It looks like this can be resolved by giving .pagefind-ui__drawer a z-index of 1 or more .

Let users submit their own tips via the site itself

The current contribution model is too much trouble for most people. We've had only a little contributions through the repo so far. They're great, and I'm really happy that people did them. But I know a lot more people have things to share out there, judging by how much of this info gets shared on twitter all the time.

So having something simple, on the site or via twitter, or something, for people to submit new tips, would be great.

Get rid of twitter embeds

Some tips are just links to tweets, and there's a plugin in the build system that turns those into tweet embeds.

This is bad because it takes time to load, requires javascript, can't be previewed in the tip list pages, and depends on twitter being available at all.

Let's convert those into actual tips on the site.

Make markdown links and image paths relative and post-process them at build time

Right now the links from one tip to the other, and the image paths are absolute (e.g. /tips/en/filter-network-requests) and do not make it possible for markdown editors such as VS Code, or the markdown preview on GitHub to render those links and images correctly.

It would help a lot if these links and paths were relative to the markdown file they're in, so that editors and previewers can render the images, and links do work while editing.

Now, to make sure those links and paths still work on the live website, we probably will need an update to the eleventy build configuration too.

I don't have a lot of time to dedicate to this right now and would love it if someone was interested in making this happen. I can help mentor and review changes.

Add manual "see also" links

The site now has a "See also" section at the bottom of each tip. This section is automatically created at build time.

I would like to also add some manual links to this section too. Sometimes you know that a tip A is very closely related to tip B, and you want to add this link to the see also section even if the automatic detection might not find them to be related.

The idea is to add a field in the frontmatter of the md file that lists related tips. At build time, we would merge the manual links and the automatic links (with the manual ones taking precedence).

Make a dark theme for the site and auto-switch to it with CSS feature query

Add a page that lists all of the tips that only one browser supports

It would be nice for users to get a quick overview of what only certain browsers support.

Paginate long tip listing pages

The home page is starting to grow too big, but really this can happen to any tag or browser page.
Let's introduce pagination so we don't have to scroll endlessly, and so that the footer can still be accessed.

Link author names to their place on the web

The authors list at the bottom of each tip is just plain text that comes from the authors field in a tip's front matter.
Let's turn this into a list of links so that each author can really get credit for their work.

Idea: add a AUTHORS.json file somewhere in the repo that links each author's name to their place on the net.
Then at build time, convert the authors' field into a list of links. This way, each author can define where they want to be linked to, and this is in just one place.

Add a lightbox image viewer

Sometimes the images are too small (especially on mobile) and you have to pinch/zoom to see the content better.
It would be good to provide a lightbox image viewer when you click on images, to see them fullscreen.

Service worker issue?

My primary browser consistently shows an outdated version of devtools-tips. I know this because if I open the site in Incognito, it always has one more tip than my primary browser. Is this a service worker issue?

Disable debugger statement tip doesn't work in Safari

I don't think setting a conditional breakpoint to false makes the debugger pause at the debugger statement in Safari, at least not when I tested. It works fine on other statements, but doesn't seem to work on the debugger statement itself.

Here is the repro: (maybe some webkit experts can chime in here)

Untitled.1.mp4

Debug popovers

Following are the couple of ways to debug overlay elements like popups, dropdown lists etc. mentioned on Devtools Tips,

1. https://devtoolstips.org/tips/en/debug-js-hover/
2. https://devtoolstips.org/tips/en/debug-js-hover-2/

Perhaps a much simpler (or non-js) way is to use the mysteriously named Emulate a focused page option in the Rendering drawer. Related docs.

I'm not sure if it deserves a separate page for the tip or do you prefer to add an addendum to the existing tips?

Load the search field code only when needed

The pagefind UI code is loaded lazily, as in, it doesn't block the page from loading.
But we could delay this even further by:

• Adding a placeholder search UI in the HTML of the page.
• Listening for focus events on the search field.
• The first time this happens, load the script, and let it replace the placeholder UI with the real search field markup.

This would speed up the page load.

Update browser support table for Snippets

Link:
https://devtoolstips.org/tips/en/use-scripts-as-snippets/

Latest version of Safari Technology Preview 156 now supports running Snippets. AFAIK, Firefox has supported running snippets via Console for a long time.

Make sure the "reporting bugs" tip is reviewed by the devtools teams

I recently added a tip for people to know how to send feedback and report bugs/features with the various devtools teams: https://github.com/captainbrosset/devtools-tips/blob/main/src/tips/en/send-feedback-about-devtools.md

I would love it if the actual devtools teams involved would review the information in that tip, so they can confirm the links.

Pinging @nchevobbe for Firefox, @codepo8 for Edge, @mathiasbynens for Chrome and @oslego for Safari.
Let me know if the content of that md file feels good to you, and don't hesitate to let me know if you want to make changes. You can also directly open a PR and I'll get it merged quickly.

Sharing tip URL from installed PWA

When the PWA is installed, you can't easily get the URL of a tip. On iPhone, in particular, the share button doesn't let you easily just grab the URL. There should be a better way to do this.

Localize tips

The tips are in an /en/ sub-folder. I did this because I envision the site will eventually be localized. The tips are simple enough that they could be translated file by file, and put in different locale sub-folders.
We have to figure out how this impacts the build and the index, tag, tip and browser pages though.

Chrome/Edge Development Resources Tab

Currently no info here, but the Edge Devtools docs have a page about this tab: Developer Resources

It's to view info about (at least) sourcemaps and is exactly the same in Chrome

Re-design the site

Update lightbox to use view transition api

when there is no preference for reduced motion, it would be fun to add an animation with more flourish that zooms the image from the page to the lightbox and then animates in the rest of the dialog, all using the view transition api

Replay XHR?

I'm not sure if I'm missing a step, but I don't see the Replay XHR option on the XHR/Fetch requests in the Network panel.

https://devtoolstips.org/tips/en/replay-xhr/

Add a "tip updated date" to tip files

When we update a tip, we usually update its date too. But doing so means moving it right back at the top of the list, both on the site and in the RSS feed.

This isn't always wanted. I think we should have both a date (to sort the tips on the site and feed), and a "updatedOn" date that's just for users to know when a tip's content was last updated.

Unused JS code detection in Safari

Safari does have a neat way to show unused JS code in the Sources panel. It basically fades the unexecuted parts of the code. I had covered this in canidev.tools/find-unused-javascript/safari.