Pretty print JavaScript | Can I DevTools

Add audio breakpointCan I add an audio breakpoint for debugging the source code?

Add class to elementCan I add an existing CSS class to an HTML element?

Add conditional breakpointCan I set a conditional breakpoint for debugging?

Add custom deviceCan I add a custom device for a responsive design mode?

Add columns for response headersCan I add custom header columns to the Network requests table?

Add inline stylesCan I add inline styles to an HTML element?

Add logpointCan I add log points to source code for debugging?

Autocomplete styles using valuesCan I autocomplete style declaration just using values?

Block request domainCan I block all network requests of a domain?

Block request patternCan I block all network request matching a URL pattern?

Block request URLCan I block a specific network request by URL?

Capture full page screenshotCan I take full page screenshot of a website?

Capture HD screenshotCan I capture a high definition screenshot of the page?

Capture node screenshotCan I take a screenshot of the DOM node?

Capture node stacktraceCan I capture node creation stack trace?

Capture screenshot via consoleCan I take screenshot of a web page from the console?

Capture viewport screenshotCan I take a screenshot of the viewport?

Change color formatCan I change authored color format to other formats like hsl, hwb etc?

Change devtools languageCan I change the language of developer tools?

Clear command historyCan I clear the command history of the console?

Clear consoleCan I clear the previous commands in the console?

Clear network logCan I clear all the requests in the network log?

Copy cURL requestCan I copy a network request as cURL?

Copy as FetchCan I copy the request as window.fetch()?

Copy as PowerShellCan I copy the request as a powershell script?

Copy as CSS selectorCan I copy a node's path as a CSS selector?

Copy image as data URICan I copy an image as a data URI?

Copy Img as background-imageCan I copy the image url as a background-image property to directly use in CSS?

Copy as JS expressionCan I copy a node's path to be used as a JavaScript expression?

Copy node as HTMLCan I copy a node as HTML?

Copy node stylesCan I copy the styles applied to an element?

Copy objectCan I copy an object from console?

Copy response textCan I copy the response object as text?

Copy styles as JSCan I copy style declarations as JavaScript object?

Deactivate breakpointsCan I temporarily deactivate breakpoints while debugging source code?

Debug attr changeCan I set breakpoint and debug attr changes of a node?

Debug Event ListenersCan I debug event listeners by setting a breakpoint on all or specific events?

Debug JavaScriptCan I debug JavaScript using devtools?

Debug node removalCan I debug by setting a breakpoint when the node is removed from the DOM?

Debug remote device pagesCan I debug websites on remote devices?

Debug scroll overflowCan I debug container with scrollbars to identify the element causing it?

Debug speculation rulesCan I debug speculation rules for prefetch/prerender next page navigations?

Debug subtree changeCan I debug by setting a breakpoint when the subtree of the node changes?

Debug XHR & Fetch callsCan I debug XHR or fetch calls by setting a breakpoint for a specific or all requests??

Delete nodeCan I delete a node from the DOM tree?

Detect third-party cookiesCan I detect if a website uses third-party cookies?

Detect memory leaksCan I detect memory leaks in my web app using devtools?

Detect missing meta tagsCan I detect the meta tags missing from the HTML?

Disable cacheCan I disable cache for the network requests?

Disable debugger statementCan I prevent the debugger from pausing at the debugger statement?

Disable JavaScriptCan I disable JavaScript on a web page?

Disable local fontsCan I disable local fonts to validate @font-face rules?

Display FPS on pageCan I display the current frames per second (FPS) of the page?

Drag & Drop elementCan I drag & drop nodes anywhere inside the DOM tree?

Duplicate nodeCan I duplicate a node in the DOM tree?

Edit node as HTMLCan I edit the node as HTML?

Edit and resend requestsCan I edit and resend network requests?

Emulate blurred visionCan I emulate blurred vision on a page?

Emulate color schemesCan I emulate different color schemes for dark and light mode?

Emulate devicesCan I emulate devices to test responsiveness of a page?

Emulate idle detectionCan I emulate detection of the user state as idle?

Emulate print stylesCan I emulate print media query?

Emulate reduced transparencyCan I emulate reduced transparency CSS media feature?

Expand DOM nodes recursivelyCan I expand DOM nodes recursively in the DOM tree?

Extend DevTools UICan I extend DevTools to customise UI?

Filter blocked cookies requestsCan I filter network requests with blocked response cookies?

Filter blocked requestsCan I filter blocked network requests?

Filter multiple resourcesCan I filter multiple resource types in the Network tab?

Filter requests by domainCan I filter network requests by domain name?

Filter requests by keywordCan I filter requests in the Network tab with a keyword?

Filter requests by propertiesCan I filter requests in the Network tab using specific properties?

Filter third party requestsCan I filter third party network requests?

Find broken linksCan I find links on a page that return Error 404, 500?

Find by XPathCan I find elements in the DOM tree using xpath?

Find color contrastCan I find the contrast ratio of a color?

Find element with CSS selectorCan I find elements in the DOM tree using CSS selector?

Find expensive CSS selectorsCan I find expensive CSS selectors?

Find in filesCan I find in files for a specific keyword?

Find inactive stylesCan I find inactive styles applied to an element?

Find offset parentCan I find the offset parent of an element?

Find unused CSSCan I find unused styles on a web page?

Find unused JavaScriptCan I find unused JavaScript code on the page?

Focus form elementsCan I focus on form elements in the DOM?

Force node statesCan I force the node to emulate a user action state like focus, hover etc?

Fuzzy autocomplete stylesCan I fuzzy autocomplete CSS properties?

Get detached elementsCan I get a list of all the detached elements to investigate memory leaks?

Get Event ListenersCan I get all the event listeners on a web page?

Get last evaluated valueCan I get the last evaluated value in the console?

Get node XPathCan I get the xpath of a node in the DOM tree?

Get selected nodeCan I refer the currently selected node in the DOM tree from the console?

Get viewport sizeCan I get the viewport size?

Go to fileCan I jump to a file by searching with a filename?

Hide extention requestsCan I hide network requests sent by extensions?

Ignore extension scriptsCan I ignore extention scripts while debugging?

Ignore scripts while debuggingCan I ignore scripts while debugging?

Ignore third-party scriptsCan I ignore third-party scripts while debugging?

Import & Export HAR fileCan I import and export network activity to a HAR file?

Import source mapsCan I import source maps manually to debug production code?

Inspect Box shadowCan I inspect CSS box shadow using an editor?

Inspect container queriesCan I inspect and debug container queries in the devtools?

Inspect CSS anglesCan I inspect & tweak the CSS angle unit values applied to a property?

Inspect CSS AnimationCan I inspect CSS animations & keyframes using the devtools?

Inspect CSS @property ruleCan I inspect the @property CSS at-rules applied to an element?

Inspect CSS FiltersCan I inspect CSS filters using an editor in devtools?

Inspect CSS FlexboxCan I inspect CSS flexbox?

Inspect CSS GridCan I inspect CSS grid?

Inspect CSS NestingCan I inspect CSS nesting rules applied to an element?

Inspect CSS PositionCan I inspect & edit the absolutely positioned elements visually?

Inspect CSS ShapesCan I inspect CSS shapes properties like clip-path, shape-outside, etc?

Inspect CSS specificityCan I inspect specificity of a CSS selector?

Inspect CSS SubgridCan I inspect CSS subgrids?

Inspect CSS varsCan I inspect CSS variables?

Inspect custom elementCan I inspect the source code of a custom element?

Inspect devtoolsCan I inspect the browser's developer tool?

Inspect DNS over HTTPSCan I inspect the network requests that were resolved with DoH (DNS over HTTPS)?

Inspect fetch priorityCan I inspect the fetchpriority applied to the resources?

Inspect Font propertiesCan I inspect and edit various CSS font properties like, font-size, line-height etc?

Inspect Local storageCan I inspect the localstorage of a website?

Inspect requestsCan I inspect Network requests?

Inspect @scope rulesCan I inspect the CSS @scope at-rules and the scoping root element?

Inspect CSS scroll snapCan I inspect & visualize CSS scroll snap layout?

Inspect Session storageCan I inspect the session storage of a website?

Inspect Shadow DOMCan I inspect the shadow DOM of an element for a user-agent?

Inspect top layerCan I inspect the top layer elements like dialog, popover etc?

Inspect web vitalsCan I inspect web vital statistics like CLS, LCP, FIP, etc.,

Jump to IdCan I jump to the target element with an id from the source element?

Locate styles in sourceCan I trace style declarations in the original source file?

Measure portion of pageCan I measure a portion of the page to compute the width, height and the distance between two points?

Never pause at exceptionsCan I prevent the debugger from pausing at exceptions?

Open Console with keyboardCan I open the console using the keyboard?

Open devtools with keyboardCan I open developer tools with the keyboard?

Open devtools with mouseCan I open developer tools using a mouse?

Open devtools with new tabCan I open developer tools by default with a new tab or a new window?

Output data as tableCan I output data in console in the table format?

Override CORS headersCan I override the CORS headers of the network response?

Override geolocationCan I override location to match a different geographic region?

Override global objectsCan I override global objects on page load before other scripts run?

Override response bodyCan I override the body of a network request?

Override response headersCan I override headers of the network response?

Override user agentCan I override the user agent to emulate different profiles?

Pick color from outside windowCan I use the color picker to pick colors from outside the browser window?

Preserve console logsCan I preserve console logs across page reloads?

Preserve network logCan I preserve network log on page reloads?

Pretty print JavaScriptCan I pretty print minified JavaScript code?

Record & replay user journeyCan I record and replay all the user actions performed on the website?

Reorder Tabs & PanesCan I reorder tabs & panes in the devtools panel?

Report feedbackCan I report issues, feedback or request features related to DevTools and the docs?

Restore default settingsCan I restore the default settings of the developer tools?

Run previous commandsCan I run the previously executed commands in the console?

Run snippetsCan I run snippet of code in devtools?

Scroll node into viewCan I scroll a DOM node into the viewport?

Select elements with XPathCan I select one or more elements using XPath expression?

Select elementsCan I select one or more elements from the console?

Set keyboard shortcutsCan I set a custom keyboard shortcuts in devtools?

Show rulers on hoverCan I enable vertical and horizontal rulers on the page when I hover on the elements?

Show tab orderCan I see the tab order of the web page?

Simulate color blindnessCan I simulate different color blindness conditions to test my web page?

Simulate device orientationCan I simulate device orientation to mock built-in accelerometer, gyroscope & compass?

Simulate force touchCan I simulate force touch to test touch events on the website?

Style console logsCan I apply style to the log statements in the console?

Target iframe in consoleCan I target iframes while debugging from the Console panel?

Test bfcacheCan I test the Back/Forward cache of a web app?

Throttle CPU speedCan I throttle CPU speed to simulate slower devices?

Throttle CSS animation speedCan I throttle CSS animation playback speed?

Throttle network speedCan I throttle network speed to simulate slower network connections like 2G, 3G etc.,?

Toggle element stateCan I toggle the element state like hover, visited, focus etc.,?

Toggle light & dark themeCan I switch to light or dark theme in devtools?

Use Display P3 colorCan I use Display P3 color format?

Use easing editorCan I use the easing editor to edit transitions and animations?

Use live expressionsCan I watch JavaScript values in real time with Live Expressions?

Use type profilerCan I use a type profiler to identify the types inferred by the engine?

View accessibility treeCan I view the accessibility tree?

View ARIA attrsCan I view ARIA attributes of an element?

View cascade layersCan I inspect CSS cascade layers?

View computed stylesCan I view computed styles?

View & Copy CSS changesCan I view and copy the CSS changes applied to an element?

View HTTP Status TextCan I view the human readable text of the HTTP status codes?

View in 3DCan I view a web page in 3D?

View styles of elementCan I view the styles applied to a pseudo element?

View transferred sizeCan I view the size of the data transferred over the network?

View uncompressed sizeCan I view the uncompressed size of a resources transferred over the network?

View URL pathCan I view the full URL path of the network requests?

Zoom In & Out DevtoolsCan I zoom in and out of the devtools panel?

Debugger

Edit

Pretty print JavaScript

Can I pretty print minified JavaScript code?

Authors

@pankajparashar

Last Modified

2/9/2024

Newsletter

-

Tags