PHP, JS; Technically Full Stack, but more Front End Dev
Was obsessed with building 2000 piece jigsaw puzzles when i was 4.
Went to Space Camp and witnessed my first tornado at 11. I didn't fly away, Thank God.
Took hiatus to dance professionally. Went on tour dancing with Madonna.
Inspect Element. Settings Dark or Light Theme.
"Select Element to inspect it." View attributes
Box Model with spacing
Click arrow to take you to class
View css parents and overridden classes
Tells you events associated with element
Click to go to declaration of listener in file
Toggle Framework and parent listeners
Debugger DOM breakpoints
Lists all breakpoints added on chrome debugger
Object Properties: All js properties associated with element
Drag and drop and delete elements.
Add Attribute, Edit HTML
Scroll to bring into view
Disable rules for active elements
Edit rules for pseudo classes
Link to css source
Live CSS edit. Add CSS class with '+'
Cool Style Editors
CSS transitions editor
Color Picker. Pick any color from anywhere on the page.
Text Shadow Editor
Toggle Device Views. Preset mobile devices + Responsive.
View Media Queries
Add Network Throttling
Device Emulation Sensors
See unused js and css for your app.
Only available in Chrome Canary
Command Save to Browser cache.
Local Modifications history
Apply Revision content
'Save as' to original file
Add Folder to Workspace. You can just drag and drop and automatically matches your local
folder to browser.
It will detect other file types like typescript ans sass.
Now you'll be able to save your changes locally and use the browser like an IDE.
Search all files. (Command + P)
Go to Line: (Command + L)
Find in file. (Command + F)
'Esc' to open and close
$() – Short for document.querySelector(). Returns the first element, matching a CSS
selector ( e.g. $(‘div’) will return the first div element in the page).; If using
jQuery returns array: $('#title')
$$() – Short for document.querySelectorAll(). Returns an array of elements that
match the given CSS selector.
$0 – $4 – A history of the five most recent DOM elements that you’ve selected in the
elements panel, $0 being the latest.
Autocompletion. Substring Completions.
ES6 Ready - try new features here
Read line smart enter.
Multiple Cursors (Hold Command)
Select Next/Prev (Command + D)
Use 'debugger' to start Chrome debugger.
Handy console methods
Sources->Snippets. Add new snippets and save them to your browser. Handy to ckeep
Command + enter to play your snippet.
For available snippets google 'Devtools snippets.'
See resource's attributes:
What initiated the request
How long it took. (When it was requested)
Colored by the file type
Hover to see TTF (Time to First Byte)
Hover to see how long it took to download
Zoom into area
Check to see total bytes on page
(Purple Line) When the browser finished parsing your html.
(Red Line) When all the resources have finished loading.
Disable cache (Also in settings)
Click on file to see information about request:
Click on on camera and reload with Command + R
Click on brackets to expand minified code
Pause on Exceptions
Click pause to have debugger stop on refresh
Hover over var to see value
Click Play to continue
Click Step Over/Step Into/Step Out function call
Call Stack - see js stack trace
Add breakpoints to JS
Inline breakpoints will automatically be detected.
Break on... (Break on non-js actions)
Under Application manage your local storage variables
Under Application manage your cookies
Go to Performance click record button or just reload with command + R. Interact with
page. Click stop
View FPS (Frames per second). Anything below 60fps is considered non-performant
Zoom in to get more details
Click to record screenshots. Hover to view.
CPU JS Profiler
Check how long js function operations are taking.
Tree or Chart format.
Expand down to function calls to see what's responsible for slowing down your
function. Chart format, zoom in to view, and hover for details.
Try again and record new profile.
Save profile locally.
All in 1 profiler. Just click record button and zoom into area.
View Summary of everything:
Info on network request.
FPS of section
Under Main, chart view of browser procedures color coded.
Parsing HTML - blue
JS Execution - yellow
Loading - light blue
Rendering - purple
Summary- chart with summary of browser procedures.
Bottom up- List of js function calls, longest at the top.
Call Tree- Tree view of how each browser procedure is being executed.
Identify and manage memory leaks
Narrow down into your code and see if there are any memory leaks. Go to Memory Panel.
Click on object to see memory size.
Expand down the function calls to see what's causing the function delay.
Memory Profile Types
Make a few Profiles
Choose Comparison view
Record Allocation Profile - memory used by functions
Record Allocation Time -heap allocation over time
Inspect if your dom elements are being placed in separate layers (which is better for
3D view with panning and zoom.
Narrow down exactly what is being painted when and how much work the browser is doing.
Paint Flashing - Check what's being repainted.
Layer Borders - Outline the layer area.
FPS Meter - Check the frames per second live.
Scrolling Performance Issues - Tells you which elements can slow down scrolling.
Emulate things like "print" media.
Audit your site.
Get page speed recommendations for improving your site.
Test how your site performs in different network situations.
Simulate a mobile experience.
Simulate Offline Experience.
Choose specific User Agent.
Sensors tab for motion sensitive debugging.
View certificate information on Security Panel.
Errors on your certificate and other details
Chrome Extension to check performance on your page.