F12 Developer Tools (@f12devtools) header
F12 Developer Tools (@f12devtools) profile picture

Tips and Tricks from your favorite Keystroke. Managed by @jonathansampson.

Joined October 2013
Photo by F12 Developer Tools (@f12devtools)Photo by F12 Developer Tools (@f12devtools)Photo by F12 Developer Tools (@f12devtools)Photo by F12 Developer Tools (@f12devtools)Photo by F12 Developer Tools (@f12devtools)
F12 Developer Tools retweeted
New and improved Event and CSS inspection for Microsoft Edge DevTools blogs.windows.com/msedgedev/…
3
9
F12 Developer Tools retweeted
Want to know the keyboard shortcuts? Just hover over the buttons on the toolbar. It's like having cheat codes, for non-cheaters.
3
11
12
F12 Developer Tools retweeted
Mother-in-law just asked that I delete something from Google results. Instead of explaining the Web, I opened F12 and deleted the DOM node 😎
6
11
1
39
Searching all files on your site (regardless which domain they're from) is very helpful. Here's how, via the dev tools in @Brave and Chrome.
1
6
17
Front-end often consists of making small iterative changes. Save/Refresh is costly. Edge keeps a log of changes, letting you be creative 👍🏼
Copy directly to clipboard from console. Supported in @brave, Firefox, Chrome. Super handy for grabbing node content!
9
14
F12 Developer Tools retweeted
Come work on @f12devtools for Microsoft Edge! We're hiring passionate developers who want to make the web better! careers.microsoft.com/search…
1
33
2
31
F12 Developer Tools retweeted
Hey developers, do you like exploring web sites via the developer tools? Open @brave and press Shift+F8 to explore a web browser 🙂 #itsmagic
Trying to locate the browser tab belonging to your dev tools instance? Run alert("") from the console 🙂 Quick Console via Esc, or Ctrl+`.
1
3
The console in Chrome's developer tools reveals all property names when using either dot notation, or bracket notation. jQuery. or jQuery[
2
1
Need to change the UA String in Chrome? Don't look for the Emulation tab. Look instead to Network Conditions.
1
debugger; Often overlooked, this simple statement will halt your JavaScript execution in any major browser with opened F12 tools.
3
4
Have you noticed the gorgeous new icons in Google Chrome's "Sources" panel? Smooshy.
1
F12 Developer Tools retweeted
Trying to convert RGB values to HEX? You can do so quickly in the console of your @f12devtools: 185..toString(16); // b9
Similar to Firefox's "Node Screenshot" feature, Microsoft Edge's Web Notes support arbitrary region clip-copying. nitter.cf/f12devtools/status/672…
4
4
Black-boxing is common in all major browsers today. Chrome takes it one step further supporting pattern-based rules.
3
3
IE gets fresh UI update. Tabs are now across the top, and the icons have been removed. Available via Windows Update.
1
4
Identifying detached nodes and their references with Internet Explorer in three easy steps.
2
11
22