Jared Siirila here for – Chrome DevTools – Save Time!
Jared Siirila here for – Chrome DevTools – Save Time!
0 0
devTools_talk
On Github siirila / devTools_talk
Jared Siirila here for
Chrome DevTools
Save Time!
DevTools can do that?
Lose 30 pounds*
Weight loss not guaranteed
And Fun
Chrome Channels
Channel Description Stable Standard released version. Major updates every 6 weeks. Beta One step ahead of stable. Major updates every 6 weeks. Dev First tested version. Updated 2-3 times per week. Canary Bleeding edge. Released daily. Untested and could be broken.Design
drop
elements
drag
and
to
rearrange
Oh no! Are your elements in the wrong order? Drag and Drop!When editing almost any string containing a number in the Elements panel, the arrow keys can be used to increment/decrement the value
This works in suprising places, such as on Hex values
Hold the shift key to increment/decrement by 10 with the arrow keys
Hold the alt key to increment/decrement by .1 with the arrow keys
Color Picker
When using the color picker, if you move the mouse over the page a magnifying glass will appear that allows you to pick a specific pixel’s color
Shift+click on a color in the sidebar to switch between color formats (rgb, hex, hsl)
Select colors from the site's color palate
Media Queries
Not available in stores
Call now!
555-867-5309*
Jenny is standing by to take your call
Development
Tired of your mouse slowing you down?
You should try...
Keyboard Shortcuts
Navigate the DOM in the Elements panel using arrow keys
Can also be done using the Search for file by name dialog by putting a : at the start
Useful to inspect elements that are hidden when the mouse moves out of them
Did your DOM change and you can't find what caused it?
Tired of searching through code looking for the culprit?
DOM Breakpoints
Breakpoints for DOM tree modifications including attribute changes and element removal.
Click Me!What editor would be complete without
Multi-carat
Hold Cmd (Ctrl on Windows) when selecting text to edit and it will allow multiple text selections.
An easier way to select multiple copies of the same word is with Cmd + D (Ctrl + D on Windows), which will select the next occurrence each time.
If you order Console.log today
We'll throw in absolutely FREE
console.clear() or clear()
Clears the console output
Useful to clear the log before the section of code being worked on so you don't have to search through the consoleconsole.assert(expression, object)
Throws an error and stack trace if the expression passed into it is false
Very useful in troubleshooting code issues that don't generate an error by defaultconsole.count(label)
Logs the # of times that count has been invoked at that line with that label.
Star Wars Star Trek Dr. Who Allows for powerful logging of loops and other low level occurrances.console.profile([label]) console.profileEnd()
Starts and stop a JavaScript CPU profile if the DevTools are open
End Profileconsole.time(label) console.timeEnd(label)
Starts and stops a timer for the specified label. When stopped, the time elapsed is displayed in the console.
End TimerOther Useful functions in the Console
Not in the console object
These only exists inside the console!
$()
$$()
Aliases for document.querySelector() and document.querySelectorAll() respectively.
copy()
Copies whatever element is passsed into it to the clipboard
copy($("#copy-to-clipboard")[0])monitor(function)
When the specified function is called, a message is logged with the method name and arguments to the method.
monitorEvents(object,[events])
When one of the specified events occurs on the object, log the event object to the console.
Workspaces
Money back guaranteed!
How much would you pay?
$199
$59
6 Easy Payments of $0
Performance
and
Debugging
Preserve Log
Keeps the log between full page navigation. An option exists for this in both the Network panel and the Console
XHR Instant Replay!
Right click on any XHR request in the Network panel to have the option to replay that request
Show/Hide columns in the Network Panel
Rewind Debugger
When debugging code, rerun the code in the any frame in the Call Stack by right clicking the frame and selecting to Restart Frame
Set breakpoint in navigateRight at line 3620Conditional Breakpoints
2 + 2 =Tired of having sequential messages stacked in the Console?
Enable "Show timestamps" in the Settings
Snippets
The Sources panel allows you to create, store, and run snippets of JavaScript
Store useful utilities
Grep
Attaches a Grep method to the Object prototype
jQuerify
Add jQuery to a page that doesn't have it
Log Globals
Find leaked globals
More snippets can be found at:
https://github.com/paulirish/devtools-addons/wiki/Snippets
Timeline Panel Screenshots
Call now, and we'll double the offer!
555-867-5309
Network Panel Screenshots
Network panel filters
Many different filters such as larger-than and domain
Chrome will autocomplete the filters applicable to your data, so play around
Timeline panel
But Wait, There's More!
DevTools all the way down
The DevTools themselves are a web app that can be edited by opening DevTools on them if they are undocked!