The function keys on keyboards don’t get the love they used to, but depending on the app you’re running, they can still be handy. Chrome DevTools has some interesting features tucked away behind your function keys. Here’s what they do.
What Is Chrome DevTools?
As the name implies, Chrome DevTools is a set of developer tools in the Google Chrome browser. Chrome DevTools is often used to diagnose issues with web pages by digging through the HTML source code of the said web page.
Chrome DevTools is also used to see what certain web pages may look like when specific changes are implemented. Developers can actually do this by editing the HTML of their page directly in DevTools. In fact, you can change what any site looks like. Of course, these aren’t changes that anyone else except you can see.
Using the Function Keys in Chrome DevTools
As with keyboard shortcuts, function keys can help you increase your output for certain tasks. Here’s what the function keys do in Chrome DevTools.
| Function Key | Description |
| F1 | Displays the Settings menu. You can also show the settings menu by simply pressing “?”. |
| F2 | Turns on the Edit as HTML function, allowing you to edit the selected element on the webpage. |
| F3 | None |
| F4 | None |
| F5 | Does a normal reload of Chrome DevTools. Alternatively, use Ctrl+R.
Use Control+F5 to do a hard reload. Alternatively, use Ctrl+Shift+R.
|
| F6 | None |
| F7 | None |
| F8 | Pauses (or resumes, if currently paused) script execution. Alternatively, use Ctrl+\. |
| F9 | None |
| F10 | Steps over the next function call. Alternatively, use Ctrl+’. |
| F11 | Steps into the next function call. Alternatively, use Ctrl+;.
Use Shit+F11 to step out of the current function. Alternatively, use Ctrl+Shift+;.
|
| F12 | Opens the panel that you just previously used. Alternatively, use Ctrl+Shift+I.
If you’re not currently in Chrome Devtools, you can use the F12 key to open it up in Chrome! This brings you straight to the Sources tab.
|
Post a Comment