困った時のdev toolsの使い方（初心者向け）
TRANSCRIPT
-
DevTools
2016/5/24 14 HTML5
Toru Yoshikawa (@yoshikawa_t)
-
Who?
CXOTechfeed techfeed.io
html5j Google Developer Experts (Chrome)HTML5 Experts.jp
html5j Web ()jQuery Mobile ()Sublime Text 2 Japan Users Group ()
Blog: http://d.hatena.ne.jp/pikotea/
/ Toru Yoshikawa @yoshikawa_t
http://d.hatena.ne.jp/pikotea/
-
TechFeed
techfeed.io
-
Chrome DevTools
-
DevTools
Chrome DevTools for beginners http://www.slideshare.net/yoshikawa_t/devtools-beginner
Chrome Developer Tools http://www.slideshare.net/yoshikawa_t/chrome-developer-tools-17787728
Chrome DevTools https://developers.google.com/web/tools/chrome-devtools/
DevTools
http://www.slideshare.net/yoshikawa_t/devtools-beginnerhttp://www.slideshare.net/yoshikawa_t/chrome-developer-tools-17787728https://developers.google.com/web/tools/chrome-devtools/
-
Metrics
Computed
Color picker
Force Element state
Hide Element
-
display: none | block | inline | inline-block | flex
margin
padding
visibility: hidden
float
position
z-index
overflow
opacity
height
width
transform
zoom
text-indent
-
chrome://inspect
-
chrome://flags
DevToolsExperiments
ex) Layers Panel
-
DevTools
DevTools
DevTools
-
Q&A
-
console.log('%cThank you!!', 'color: pink);
(@yoshikawa_t)