ChromeGeek.com

ChromeOS DevTools Shortcuts

ChromeOS Note

ChromeOS uses the same Chrome DevTools as other platforms. Since ChromeOS is Linux-based, it follows the Windows/Linux keyboard shortcuts listed in this guide. All shortcuts work identically on ChromeOS devices.

Opening DevTools

Open Last Used Panel

F12 or Ctrl+Shift+I

Open Console Panel

Ctrl+Shift+J

Open Elements Panel

Ctrl+Shift+C

Toggle Inspect Element Mode

Ctrl+Shift+C

Global DevTools Shortcuts

Show Settings

? or F1

Focus Next Panel

Ctrl+]

Focus Previous Panel

Ctrl+[

Switch Docking Position

Ctrl+Shift+D

Toggle Device Mode

Ctrl+Shift+M

Open Command Menu

Ctrl+Shift+P

Toggle Drawer

Escape

Normal Reload

F5 or Ctrl+R

Hard Reload

Ctrl+F5 or Ctrl+Shift+R

Search in Current Panel

Ctrl+F

Search Across All Resources

Ctrl+Shift+F

Open File in Sources

Ctrl+O or Ctrl+P

Zoom In

Ctrl+Shift++

Zoom Out

Ctrl+-

Restore Default Zoom

Ctrl+0

Run Snippet

Ctrl+O then type ! + script name Elements Panel Shortcuts

Undo Change

Ctrl+Z

Redo Change

Ctrl+Y

Select Element Above/Below

↑ / ↓

Expand Node or Select Below

→

Collapse Node or Select Above

←

Expand/Collapse All Children

Ctrl+Alt+Click arrow icon

Toggle Edit Attributes

Enter

Navigate Attributes

Tab / Shift+Tab

Hide Selected Element

H

Toggle Edit as HTML

F2

Styles Panel Shortcuts

Go to Property Declaration

Ctrl+Click property value

Cycle Color Formats

Shift+Click color preview

Navigate Properties

Tab / Shift+Tab

Increment/Decrement by 0.1

Alt+↑ / Alt+↓

Increment/Decrement by 1

↑ / ↓

Increment/Decrement by 10

Shift+↑ / Shift+↓

Increment/Decrement by 100

Ctrl+↑ / Ctrl+↓

Cycle Angle Formats

Shift+Click angle preview

Sources Panel & Debugging

Pause/Resume Script

F8 or Ctrl+\

Step Over Function

F10 or Ctrl+'

Step Into Function

F11 or Ctrl+;

Step Out of Function ✏ Code Editor Shortcuts

Shift+F11 or Ctrl+Shift+;

Continue to Line

Ctrl+Click line of code

Select Call Frame Below/Above

Ctrl+. / Ctrl+,

Save Changes

Ctrl+S

Save All Changes

Ctrl+Alt+S

Go to Line

Ctrl+G

Jump to Line Number

Ctrl+O then type : + line number

Jump to Column

Ctrl+O then :line:column

Go to Function/Rule

Ctrl+Shift+O

Close Active Tab

Alt+W

Next/Previous Tab

Ctrl+Page Up/Down

Toggle Navigation Sidebar

Ctrl+Shift+Y

Toggle Debugger Sidebar

Ctrl+Shift+H

Delete Last Word

Ctrl+Delete

Add/Remove Breakpoint

Ctrl+B

Edit Conditional Breakpoint

Ctrl+Alt+B

Open Conditional Breakpoint

Ctrl+Click line number

Open Logpoint Dialog

Ctrl+Shift+Click line number

Go to Matching Bracket

Ctrl+M

Toggle Single-line Comment

Ctrl+/

Select Next Occurrence

Ctrl+D

Deselect Occurrence

Ctrl+U

Network Panel Shortcuts

Search Network Activity

Ctrl+F

Start/Stop Recording

Ctrl+E

Record Reload

Ctrl+R

Replay XHR Request

R

Hide Request Details

Escape

Performance & Memory Panels

Start/Stop Performance Recording

Ctrl+E

Save Performance Recording

Ctrl+S

Load Performance Recording

Ctrl+O

Start/Stop Memory Recording

Ctrl+E

Console Panel Shortcuts

Accept Autocomplete

→ or Tab

Reject Autocomplete

Escape

Navigate Autocomplete List

↑ / ↓ or Ctrl+P / N

Previous Statement

↑

Next Statement

↓

Focus Console

Ctrl+`

Clear Console

Ctrl+L

Force Multi-line Entry

Shift+Enter

Execute Command

Enter

Expand All Object Properties

Alt+Click Expand

Search Tab & Additional Shortcuts

Expand/Collapse All Search Results

Ctrl+Shift+{ or }

Start/Stop Recorder

Ctrl+E

Replay Recording

Ctrl+Enter

Copy Recording/Step

Ctrl+C

Toggle Code View

Ctrl+B

Layers Panel Navigation

Move Diagram (Up/Left/Down/Right)

W / A / S / D

Toggle Pan Mode

X

Toggle Rotate Mode

V

Reset Position & Rotation

0

Zoom In

Shift++ or Mouse Wheel Up

Zoom Out

Shift+- or Mouse Wheel Down ⚡ Pro Tips for ChromeOS Developers

Quick Command Access

Ctrl+Shift+P - Opens the Command Menu where you can type any DevTools command

Device Testing

Ctrl+Shift+M - Perfect for testing responsive designs on ChromeOS

Network Throttling

Open Network panel → Click gear icon → Enable throttling to simulate different connection speeds

CSS Grid/Flexbox Debugging

In Elements panel, look for Grid/Flex badges next to elements for visual debugging

Memory Leak Detection

Use Ctrl+Shift+P → "Collect garbage" → Take heap snapshots to find memory leaks

Performance Recording

Ctrl+E in Performance panel → Interact with page → Stop recording for detailed analysis

Color Picker

In Styles panel, Shift+Click on color squares to cycle through color formats (Hex, RGB, HSL)

Screenshot Capture

Ctrl+Shift+P → Type "screenshot" → Choose full page, node, or area screenshot

ChromeOS-Specific Benefits

Linux Compatibility: ChromeOS runs Chrome DevTools natively with full Linux shortcuts support. Touch Support: Many ChromeOS devices support touch, making element inspection even more intuitive. Crostini Integration: Use DevTools alongside Linux development environment for full-stack debugging. Android App Debugging: ChromeOS can debug Android apps using the same DevTools interface.

Advanced ChromeOS DevTools Features

Accessibility Tree

Elements panel → Computed tab → Accessibility section for a11y debugging

Lighthouse Audits

Lighthouse panel → Generate report for performance, accessibility, SEO analysis

Security Panel

View certificate details, mixed content issues, and security state

Application Panel

Inspect Service Workers, Storage, Cookies, and Progressive Web App features

Coverage Analysis

Ctrl+Shift+P → "Show Coverage" → See unused CSS/JS code

Animation Inspector

Ctrl+Shift+P → "Show Animations" → Debug CSS animations and transitions

Remote Debugging

Debug Chrome on Android devices connected to your ChromeOS device

Workspaces

Sources panel → Filesystem → Add folder to edit files directly in DevTools

Debugging Workflow Shortcuts

Quick Console Access

Ctrl+Shift+J → Fastest way to test JavaScript snippets

Element Inspection

Ctrl+Shift+C → Click any element → Instant DOM navigation

Network Issue Debugging

F12 → Network tab → Ctrl+R → Analyze failed requests

Performance Bottlenecks

Performance tab → Ctrl+E → Record → Ctrl+E → Analyze flamegraph

CSS Debugging

Elements → Styles → Ctrl+Click property → Jump to source

JavaScript Breakpoints

Sources → Ctrl+B on line → F8 to run → F10 to step

⌨ ChromeOS System Integration

ChromeOS-Specific Considerations

Function Keys: Some ChromeOS devices may require

Search + F-key for F1-F12 functionality.

Alt Key: ChromeOS uses Alt instead of Option (Mac) for modifier combinations. Right-Click:

Alt+Click or two-finger tap on trackpad for context menus.

Multitasking: Use

Alt+Tab to switch between DevTools and your app.

Switch Windows

Alt+Tab - Switch between DevTools and browser

New Tab

Ctrl+T - Open new tab while debugging

Split Screen

Alt+[ or Alt+] - Dock DevTools for split-screen debugging

Full Screen Toggle

F11 - Toggle full screen mode

Virtual Desks

Search+Shift+] - Move to next virtual desk

Overview Mode

Search+Shift+Alt+O - See all windows and virtual desks

Master ChromeOS Development

This comprehensive cheat sheet covers all essential DevTools shortcuts for ChromeOS developers.

Bookmark this reference for quick access during your development workflow!

Visit ChromeGeek.com More ChromeOS Resources