Fun with Chrome Wordcamp Chicago #WCCHI Developer Tools ... · Developer Tools Wordcamp Chicago...
Transcript of Fun with Chrome Wordcamp Chicago #WCCHI Developer Tools ... · Developer Tools Wordcamp Chicago...
![Page 1: Fun with Chrome Wordcamp Chicago #WCCHI Developer Tools ... · Developer Tools Wordcamp Chicago #WCCHI Steven Stern (sterndata) April, 2017. A frequent response on the forums. Overview](https://reader034.fdocuments.in/reader034/viewer/2022052314/5f0470957e708231d40df9a2/html5/thumbnails/1.jpg)
Fun with Chrome Developer Tools
Wordcamp Chicago #WCCHI
Steven Stern (sterndata)
https://whatagreatwebsite.nethttps://www.sterndata.com
April, 2017
![Page 2: Fun with Chrome Wordcamp Chicago #WCCHI Developer Tools ... · Developer Tools Wordcamp Chicago #WCCHI Steven Stern (sterndata) April, 2017. A frequent response on the forums. Overview](https://reader034.fdocuments.in/reader034/viewer/2022052314/5f0470957e708231d40df9a2/html5/thumbnails/2.jpg)
A frequent response on the forums
![Page 3: Fun with Chrome Wordcamp Chicago #WCCHI Developer Tools ... · Developer Tools Wordcamp Chicago #WCCHI Steven Stern (sterndata) April, 2017. A frequent response on the forums. Overview](https://reader034.fdocuments.in/reader034/viewer/2022052314/5f0470957e708231d40df9a2/html5/thumbnails/3.jpg)
OverviewAlso known as "The Inspector".
Similar tools in Firefox, Safari, IE/Edge
Opening the Chrome DevTools
● Select More Tools > Developer Tools from the Chrome Menu.
● Right-click on a page element and select Inspect
● Use the keyboard shortcuts Ctrl+Shift+I (Windows) or Cmd+Opt+I (Mac) or F12
More info? https://developers.google.com/web/tools/chrome-devtools/
![Page 4: Fun with Chrome Wordcamp Chicago #WCCHI Developer Tools ... · Developer Tools Wordcamp Chicago #WCCHI Steven Stern (sterndata) April, 2017. A frequent response on the forums. Overview](https://reader034.fdocuments.in/reader034/viewer/2022052314/5f0470957e708231d40df9a2/html5/thumbnails/4.jpg)
Common questions solved via CSSHow do I change the color of that header?
There's too much space below the menu!
Make the tags go away without editing PHP
How does this look on an iPhone?
How do I change the submenu style?
![Page 5: Fun with Chrome Wordcamp Chicago #WCCHI Developer Tools ... · Developer Tools Wordcamp Chicago #WCCHI Steven Stern (sterndata) April, 2017. A frequent response on the forums. Overview](https://reader034.fdocuments.in/reader034/viewer/2022052314/5f0470957e708231d40df9a2/html5/thumbnails/5.jpg)
DisclaimerGoogle changes things without notice, adding new features, moving things around.
![Page 6: Fun with Chrome Wordcamp Chicago #WCCHI Developer Tools ... · Developer Tools Wordcamp Chicago #WCCHI Steven Stern (sterndata) April, 2017. A frequent response on the forums. Overview](https://reader034.fdocuments.in/reader034/viewer/2022052314/5f0470957e708231d40df9a2/html5/thumbnails/6.jpg)
![Page 7: Fun with Chrome Wordcamp Chicago #WCCHI Developer Tools ... · Developer Tools Wordcamp Chicago #WCCHI Steven Stern (sterndata) April, 2017. A frequent response on the forums. Overview](https://reader034.fdocuments.in/reader034/viewer/2022052314/5f0470957e708231d40df9a2/html5/thumbnails/7.jpg)
![Page 8: Fun with Chrome Wordcamp Chicago #WCCHI Developer Tools ... · Developer Tools Wordcamp Chicago #WCCHI Steven Stern (sterndata) April, 2017. A frequent response on the forums. Overview](https://reader034.fdocuments.in/reader034/viewer/2022052314/5f0470957e708231d40df9a2/html5/thumbnails/8.jpg)
The Elements1. Inspect Pointer2. Device Simulator3. The Elements Tab4. Views
a. Styles shows the CSS right hereb. Computed shows the inheritance
5. More little things with big impacta. hov trigger - useful for sub-menus and hidden stuffb. .cls adds a class to an elementc. + adds a selector for CSS
![Page 9: Fun with Chrome Wordcamp Chicago #WCCHI Developer Tools ... · Developer Tools Wordcamp Chicago #WCCHI Steven Stern (sterndata) April, 2017. A frequent response on the forums. Overview](https://reader034.fdocuments.in/reader034/viewer/2022052314/5f0470957e708231d40df9a2/html5/thumbnails/9.jpg)
But there's nothing in my CSS for that!
![Page 10: Fun with Chrome Wordcamp Chicago #WCCHI Developer Tools ... · Developer Tools Wordcamp Chicago #WCCHI Steven Stern (sterndata) April, 2017. A frequent response on the forums. Overview](https://reader034.fdocuments.in/reader034/viewer/2022052314/5f0470957e708231d40df9a2/html5/thumbnails/10.jpg)
EditingClick to edit
Arrow keys are funfor numeric values
Expand by clickingon arrowheads
![Page 11: Fun with Chrome Wordcamp Chicago #WCCHI Developer Tools ... · Developer Tools Wordcamp Chicago #WCCHI Steven Stern (sterndata) April, 2017. A frequent response on the forums. Overview](https://reader034.fdocuments.in/reader034/viewer/2022052314/5f0470957e708231d40df9a2/html5/thumbnails/11.jpg)
Look for the little iconsThis is great forthings like text-shadow, box-shadow,etc.
Drag and drop and see theresults in real time
Color box opens a color picker
![Page 12: Fun with Chrome Wordcamp Chicago #WCCHI Developer Tools ... · Developer Tools Wordcamp Chicago #WCCHI Steven Stern (sterndata) April, 2017. A frequent response on the forums. Overview](https://reader034.fdocuments.in/reader034/viewer/2022052314/5f0470957e708231d40df9a2/html5/thumbnails/12.jpg)
What does the browser see? Computed results--
![Page 13: Fun with Chrome Wordcamp Chicago #WCCHI Developer Tools ... · Developer Tools Wordcamp Chicago #WCCHI Steven Stern (sterndata) April, 2017. A frequent response on the forums. Overview](https://reader034.fdocuments.in/reader034/viewer/2022052314/5f0470957e708231d40df9a2/html5/thumbnails/13.jpg)
Console shows errors and warnings
![Page 14: Fun with Chrome Wordcamp Chicago #WCCHI Developer Tools ... · Developer Tools Wordcamp Chicago #WCCHI Steven Stern (sterndata) April, 2017. A frequent response on the forums. Overview](https://reader034.fdocuments.in/reader034/viewer/2022052314/5f0470957e708231d40df9a2/html5/thumbnails/14.jpg)
Responsive? We got responsive!
![Page 15: Fun with Chrome Wordcamp Chicago #WCCHI Developer Tools ... · Developer Tools Wordcamp Chicago #WCCHI Steven Stern (sterndata) April, 2017. A frequent response on the forums. Overview](https://reader034.fdocuments.in/reader034/viewer/2022052314/5f0470957e708231d40df9a2/html5/thumbnails/15.jpg)
Settings? Of course.
![Page 16: Fun with Chrome Wordcamp Chicago #WCCHI Developer Tools ... · Developer Tools Wordcamp Chicago #WCCHI Steven Stern (sterndata) April, 2017. A frequent response on the forums. Overview](https://reader034.fdocuments.in/reader034/viewer/2022052314/5f0470957e708231d40df9a2/html5/thumbnails/16.jpg)
Settings? Of course.
![Page 17: Fun with Chrome Wordcamp Chicago #WCCHI Developer Tools ... · Developer Tools Wordcamp Chicago #WCCHI Steven Stern (sterndata) April, 2017. A frequent response on the forums. Overview](https://reader034.fdocuments.in/reader034/viewer/2022052314/5f0470957e708231d40df9a2/html5/thumbnails/17.jpg)
Why is my site slow?
![Page 18: Fun with Chrome Wordcamp Chicago #WCCHI Developer Tools ... · Developer Tools Wordcamp Chicago #WCCHI Steven Stern (sterndata) April, 2017. A frequent response on the forums. Overview](https://reader034.fdocuments.in/reader034/viewer/2022052314/5f0470957e708231d40df9a2/html5/thumbnails/18.jpg)
WorkflowTest in Dev Tools
If you aren't in a child theme, use a Custom CSS Plugin
● Simple Custom CSS● Jetpack
Disable all caching
One thing at a time -- don't be greedy
![Page 19: Fun with Chrome Wordcamp Chicago #WCCHI Developer Tools ... · Developer Tools Wordcamp Chicago #WCCHI Steven Stern (sterndata) April, 2017. A frequent response on the forums. Overview](https://reader034.fdocuments.in/reader034/viewer/2022052314/5f0470957e708231d40df9a2/html5/thumbnails/19.jpg)
Questions?Comments?
Observations?
Then let's get on with it and play!
![Page 20: Fun with Chrome Wordcamp Chicago #WCCHI Developer Tools ... · Developer Tools Wordcamp Chicago #WCCHI Steven Stern (sterndata) April, 2017. A frequent response on the forums. Overview](https://reader034.fdocuments.in/reader034/viewer/2022052314/5f0470957e708231d40df9a2/html5/thumbnails/20.jpg)
Where to find me
@sterndata on WordPress forums & #WordPress channel on freenode IRC
@sds52 on Twitter