Submit Search
Upload
困った時のDev toolsの使い方(初心者向け)
•
6 likes
•
2,848 views
yoshikawa_t
Follow
2016年5月24日に実施された「第14回HTML5ビギナーズ つまずくこともあるけどこうやって成長したよ!」での講演資料です。
Read less
Read more
Technology
Report
Share
Report
Share
1 of 15
Download now
Download to read offline
Recommended
TechFeedというテクノロジーキュレーションサービスを作った話
TechFeedというテクノロジーキュレーションサービスを作った話
yoshikawa_t
Chrome Devtools for beginners (v1.1)
Chrome Devtools for beginners (v1.1)
yoshikawa_t
これからのモバイルWebと最新動向
これからのモバイルWebと最新動向
yoshikawa_t
いまさら聞けないHTML5概要
いまさら聞けないHTML5概要
yoshikawa_t
Sencha touch vs j query mobile
Sencha touch vs j query mobile
yoshikawa_t
モバイル時代のWebパフォーマンス
モバイル時代のWebパフォーマンス
yoshikawa_t
Chrome Apps & Chromeウェブストア概要
Chrome Apps & Chromeウェブストア概要
yoshikawa_t
jQuery MobileとHTML5
jQuery MobileとHTML5
yoshikawa_t
Recommended
TechFeedというテクノロジーキュレーションサービスを作った話
TechFeedというテクノロジーキュレーションサービスを作った話
yoshikawa_t
Chrome Devtools for beginners (v1.1)
Chrome Devtools for beginners (v1.1)
yoshikawa_t
これからのモバイルWebと最新動向
これからのモバイルWebと最新動向
yoshikawa_t
いまさら聞けないHTML5概要
いまさら聞けないHTML5概要
yoshikawa_t
Sencha touch vs j query mobile
Sencha touch vs j query mobile
yoshikawa_t
モバイル時代のWebパフォーマンス
モバイル時代のWebパフォーマンス
yoshikawa_t
Chrome Apps & Chromeウェブストア概要
Chrome Apps & Chromeウェブストア概要
yoshikawa_t
jQuery MobileとHTML5
jQuery MobileとHTML5
yoshikawa_t
Chrome packaged appsをデバッグ
Chrome packaged appsをデバッグ
yoshikawa_t
Chrome Developer Toolsを使いこなそう!
Chrome Developer Toolsを使いこなそう!
yoshikawa_t
モバイル時代のWebパフォーマンスTips
モバイル時代のWebパフォーマンスTips
yoshikawa_t
Chrome apps for mobile 概要
Chrome apps for mobile 概要
yoshikawa_t
マークアップの作業効率をあげよう!
マークアップの作業効率をあげよう!
Mitsuo Kawashima
HTML5 のお話
HTML5 のお話
tomo_masakura
Chrome DevTools for beginners v1.2
Chrome DevTools for beginners v1.2
yoshikawa_t
potatotips (iOS/Android開発Tips共有会) 第19回 資料
potatotips (iOS/Android開発Tips共有会) 第19回 資料
Takao Sumitomo
SQLiteDatabaseを無理矢理覗く
SQLiteDatabaseを無理矢理覗く
Takao Sumitomo
開発を効率的に進めるられるまでの道程
開発を効率的に進めるられるまでの道程
Takao Sumitomo
モバイルアプリ開発最前線(PhoneGap)
モバイルアプリ開発最前線(PhoneGap)
Akihiro Matsumura
Titanium
Titanium
yono05
Titanium Mobile ~本当にあったこわい話~
Titanium Mobile ~本当にあったこわい話~
Atsushi Harada
Go goes Mobile: Quick Exploration on Go 1.5 and Gomobile
Go goes Mobile: Quick Exploration on Go 1.5 and Gomobile
Takahiro Yoshimura
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜
Masakazu Muraoka
[potatotips #18] Android M Developer Preview & Wear 最新トピック
[potatotips #18] Android M Developer Preview & Wear 最新トピック
Kenichi Kambara
Alternative WebView
Alternative WebView
Shigeki Yamato
Swaggerのさわりだけ
Swaggerのさわりだけ
Masakazu Muraoka
デブサミ2014【13-D-2】川田寛氏 HTML5がSIに与えた衝撃、エンジニアは何を学ぶべきか?
デブサミ2014【13-D-2】川田寛氏 HTML5がSIに与えた衝撃、エンジニアは何を学ぶべきか?
Developers Summit
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Masakazu Muraoka
最近のブラウザ状況
最近のブラウザ状況
yoshikawa_t
Thing.jsについて
Thing.jsについて
Masakazu Muraoka
More Related Content
What's hot
Chrome packaged appsをデバッグ
Chrome packaged appsをデバッグ
yoshikawa_t
Chrome Developer Toolsを使いこなそう!
Chrome Developer Toolsを使いこなそう!
yoshikawa_t
モバイル時代のWebパフォーマンスTips
モバイル時代のWebパフォーマンスTips
yoshikawa_t
Chrome apps for mobile 概要
Chrome apps for mobile 概要
yoshikawa_t
マークアップの作業効率をあげよう!
マークアップの作業効率をあげよう!
Mitsuo Kawashima
HTML5 のお話
HTML5 のお話
tomo_masakura
Chrome DevTools for beginners v1.2
Chrome DevTools for beginners v1.2
yoshikawa_t
potatotips (iOS/Android開発Tips共有会) 第19回 資料
potatotips (iOS/Android開発Tips共有会) 第19回 資料
Takao Sumitomo
SQLiteDatabaseを無理矢理覗く
SQLiteDatabaseを無理矢理覗く
Takao Sumitomo
開発を効率的に進めるられるまでの道程
開発を効率的に進めるられるまでの道程
Takao Sumitomo
モバイルアプリ開発最前線(PhoneGap)
モバイルアプリ開発最前線(PhoneGap)
Akihiro Matsumura
Titanium
Titanium
yono05
Titanium Mobile ~本当にあったこわい話~
Titanium Mobile ~本当にあったこわい話~
Atsushi Harada
Go goes Mobile: Quick Exploration on Go 1.5 and Gomobile
Go goes Mobile: Quick Exploration on Go 1.5 and Gomobile
Takahiro Yoshimura
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜
Masakazu Muraoka
[potatotips #18] Android M Developer Preview & Wear 最新トピック
[potatotips #18] Android M Developer Preview & Wear 最新トピック
Kenichi Kambara
Alternative WebView
Alternative WebView
Shigeki Yamato
Swaggerのさわりだけ
Swaggerのさわりだけ
Masakazu Muraoka
デブサミ2014【13-D-2】川田寛氏 HTML5がSIに与えた衝撃、エンジニアは何を学ぶべきか?
デブサミ2014【13-D-2】川田寛氏 HTML5がSIに与えた衝撃、エンジニアは何を学ぶべきか?
Developers Summit
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Masakazu Muraoka
What's hot
(20)
Chrome packaged appsをデバッグ
Chrome packaged appsをデバッグ
Chrome Developer Toolsを使いこなそう!
Chrome Developer Toolsを使いこなそう!
モバイル時代のWebパフォーマンスTips
モバイル時代のWebパフォーマンスTips
Chrome apps for mobile 概要
Chrome apps for mobile 概要
マークアップの作業効率をあげよう!
マークアップの作業効率をあげよう!
HTML5 のお話
HTML5 のお話
Chrome DevTools for beginners v1.2
Chrome DevTools for beginners v1.2
potatotips (iOS/Android開発Tips共有会) 第19回 資料
potatotips (iOS/Android開発Tips共有会) 第19回 資料
SQLiteDatabaseを無理矢理覗く
SQLiteDatabaseを無理矢理覗く
開発を効率的に進めるられるまでの道程
開発を効率的に進めるられるまでの道程
モバイルアプリ開発最前線(PhoneGap)
モバイルアプリ開発最前線(PhoneGap)
Titanium
Titanium
Titanium Mobile ~本当にあったこわい話~
Titanium Mobile ~本当にあったこわい話~
Go goes Mobile: Quick Exploration on Go 1.5 and Gomobile
Go goes Mobile: Quick Exploration on Go 1.5 and Gomobile
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜
[potatotips #18] Android M Developer Preview & Wear 最新トピック
[potatotips #18] Android M Developer Preview & Wear 最新トピック
Alternative WebView
Alternative WebView
Swaggerのさわりだけ
Swaggerのさわりだけ
デブサミ2014【13-D-2】川田寛氏 HTML5がSIに与えた衝撃、エンジニアは何を学ぶべきか?
デブサミ2014【13-D-2】川田寛氏 HTML5がSIに与えた衝撃、エンジニアは何を学ぶべきか?
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Similar to 困った時のDev toolsの使い方(初心者向け)
最近のブラウザ状況
最近のブラウザ状況
yoshikawa_t
Thing.jsについて
Thing.jsについて
Masakazu Muraoka
Chrome Extensionでスクリーンシェアをやってみる
Chrome Extensionでスクリーンシェアをやってみる
Yusuke Naka
初めてのHtml5 20120612
初めてのHtml5 20120612
yohei iwakura
HTML5でOpen Dataをやってみた
HTML5でOpen Dataをやってみた
Masakazu Muraoka
Html5 and Graphics
Html5 and Graphics
Masakazu Muraoka
HTML5を活用した効果の高いリッチアプリ開発体制構築とコンサルティングの実現方法
HTML5を活用した効果の高いリッチアプリ開発体制構築とコンサルティングの実現方法
Kazuhiro Kotsutsumi
Aizu.LT::Tokyo #2
Aizu.LT::Tokyo #2
Taku Unno
Trelloを使ってサクサク開発してみませんか?_yohhatu
Trelloを使ってサクサク開発してみませんか?_yohhatu
Yoh Nakamura
xR Developerなら知っておきたいカメラの基礎知識
xR Developerなら知っておきたいカメラの基礎知識
Satoshi Maemoto
Htmlのコトバ
Htmlのコトバ
Masakazu Muraoka
HTML5が創り出す新たな世界
HTML5が創り出す新たな世界
lpijapan
XP祭り2016 - SWチームとHWチームがスクラムを組んだら
XP祭り2016 - SWチームとHWチームがスクラムを組んだら
Life Robotics
FxOSはウェアラブルデバイスの夢を見るか?
FxOSはウェアラブルデバイスの夢を見るか?
Masakazu Muraoka
Ionicで作るTechfeed
Ionicで作るTechfeed
yoshikawa_t
Mozapps installがなくなったことへの不平不満
Mozapps installがなくなったことへの不平不満
Masakazu Muraoka
20151114 _html5無料セミナー(OSC2015徳島)
20151114 _html5無料セミナー(OSC2015徳島)
Takahiro Kujirai
Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発
Masakazu Muraoka
Attractive HTML5
Attractive HTML5
Sho Ito
デブサミ2013LT大会 Japan SenchaUG
デブサミ2013LT大会 Japan SenchaUG
dsuke Takaoka
Similar to 困った時のDev toolsの使い方(初心者向け)
(20)
最近のブラウザ状況
最近のブラウザ状況
Thing.jsについて
Thing.jsについて
Chrome Extensionでスクリーンシェアをやってみる
Chrome Extensionでスクリーンシェアをやってみる
初めてのHtml5 20120612
初めてのHtml5 20120612
HTML5でOpen Dataをやってみた
HTML5でOpen Dataをやってみた
Html5 and Graphics
Html5 and Graphics
HTML5を活用した効果の高いリッチアプリ開発体制構築とコンサルティングの実現方法
HTML5を活用した効果の高いリッチアプリ開発体制構築とコンサルティングの実現方法
Aizu.LT::Tokyo #2
Aizu.LT::Tokyo #2
Trelloを使ってサクサク開発してみませんか?_yohhatu
Trelloを使ってサクサク開発してみませんか?_yohhatu
xR Developerなら知っておきたいカメラの基礎知識
xR Developerなら知っておきたいカメラの基礎知識
Htmlのコトバ
Htmlのコトバ
HTML5が創り出す新たな世界
HTML5が創り出す新たな世界
XP祭り2016 - SWチームとHWチームがスクラムを組んだら
XP祭り2016 - SWチームとHWチームがスクラムを組んだら
FxOSはウェアラブルデバイスの夢を見るか?
FxOSはウェアラブルデバイスの夢を見るか?
Ionicで作るTechfeed
Ionicで作るTechfeed
Mozapps installがなくなったことへの不平不満
Mozapps installがなくなったことへの不平不満
20151114 _html5無料セミナー(OSC2015徳島)
20151114 _html5無料セミナー(OSC2015徳島)
Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発
Attractive HTML5
Attractive HTML5
デブサミ2013LT大会 Japan SenchaUG
デブサミ2013LT大会 Japan SenchaUG
More from yoshikawa_t
Chrome DevTools Awesome 10 Features +1
Chrome DevTools Awesome 10 Features +1
yoshikawa_t
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
yoshikawa_t
jQuery Mobile is not dead!
jQuery Mobile is not dead!
yoshikawa_t
HTML5開発最前線
HTML5開発最前線
yoshikawa_t
Chrome Apps のデバイスAPI
Chrome Apps のデバイスAPI
yoshikawa_t
Chrome Apps 概要
Chrome Apps 概要
yoshikawa_t
Html5概要 & デモ
Html5概要 & デモ
yoshikawa_t
いまさら聞けないCSSレイアウト入門
いまさら聞けないCSSレイアウト入門
yoshikawa_t
Let's begin WebRTC
Let's begin WebRTC
yoshikawa_t
Chrome DevTools for beginners
Chrome DevTools for beginners
yoshikawa_t
jQuery Mobile 1.3 最新情報
jQuery Mobile 1.3 最新情報
yoshikawa_t
Devtools.next
Devtools.next
yoshikawa_t
Chrome DevTools.next
Chrome DevTools.next
yoshikawa_t
jQuery Mobileカスタマイズ自由自在 v1.2
jQuery Mobileカスタマイズ自由自在 v1.2
yoshikawa_t
jQuery Mobileバレしないモバイルサイトの作り方
jQuery Mobileバレしないモバイルサイトの作り方
yoshikawa_t
More from yoshikawa_t
(15)
Chrome DevTools Awesome 10 Features +1
Chrome DevTools Awesome 10 Features +1
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
jQuery Mobile is not dead!
jQuery Mobile is not dead!
HTML5開発最前線
HTML5開発最前線
Chrome Apps のデバイスAPI
Chrome Apps のデバイスAPI
Chrome Apps 概要
Chrome Apps 概要
Html5概要 & デモ
Html5概要 & デモ
いまさら聞けないCSSレイアウト入門
いまさら聞けないCSSレイアウト入門
Let's begin WebRTC
Let's begin WebRTC
Chrome DevTools for beginners
Chrome DevTools for beginners
jQuery Mobile 1.3 最新情報
jQuery Mobile 1.3 最新情報
Devtools.next
Devtools.next
Chrome DevTools.next
Chrome DevTools.next
jQuery Mobileカスタマイズ自由自在 v1.2
jQuery Mobileカスタマイズ自由自在 v1.2
jQuery Mobileバレしないモバイルサイトの作り方
jQuery Mobileバレしないモバイルサイトの作り方
Recently uploaded
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
sn679259
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
WSO2
Recently uploaded
(10)
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
困った時のDev toolsの使い方(初心者向け)
1.
困った時のDevToolsの使い⽅方 2016/5/24 第14回 HTML5ビギナーズ
Toru Yoshikawa (@yoshikawa_̲t)
2.
Who? 株式会社オープンウェブ・テクノロジー CXO/Techfeed (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
3.
エンジニア向け情報キュレーションサービス 「 TechFeed」を運営してます!
techfeed.io
4.
Chrome DevTools 使ってますか?
5.
詳しい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は開発が活発なので⾒見見た⽬目や機能ががらっ と変わることがあるので頑張って読み替える必要が あるかも?
6.
この要素って どうなってるの? 要素を⾒見見つけよう ページから要素を選択する
タグから要素を選択して表⽰示する コードから要素を表⽰示する
7.
この要素って どうなってるの? スタイルを確認して調整する ボックスモデル(Metrics)
最終的に適⽤用済みのスタイル(Computed) ⾊色指定(Color picker) 状態指定(Force Element state) ⼀一時的に要素を⾮非表⽰示(Hide Element)
8.
ユースケースを考えて⾒見見る この⽂文字サイズってどこで定義されてるの? スタイル、効いてなくない? なんかマージンの⼤大きさが合わないんだけど…
この要素どこいったの!?
9.
要素が隠れる要因になる 主なスタイル display: none
| block | inline | inline-‐‑‒block | flex ☆☆☆ margin padding visibility: hidden ☆☆ float ☆☆☆ position ☆☆☆ z-‐‑‒index ☆☆ overflow ☆ opacity ☆ height width transform zoom text-‐‑‒indent
10.
このアニメーションって どうなってるの? タイムラインを⾒見見てみよう 再⽣生/シーク
スピード調整 アニメーションをカスタマイズ
11.
モバイルで⾒見見た⽬目は どうなる? デバイスモードを使おう ユーザーエージェント指定
ネットワークスピードを選択 リモートデバッグ(chrome://inspect) スクリーンキャスト
12.
おまけ 最新の機能を試してみよう 最新の機能を試してみよう chrome://flagsで「デベロッパー
ツールの試験 運⽤用版機能」をオン DevToolsの設定で「Experiments」が新たに出現 ex) Layers Panel
13.
まとめ DevToolsは⾼高機能なツールではありますが、あ くまでツールでしかありません。 DevToolsを⾃自由⾃自在に使いこなすには、やはり 基本的な知識識が必要になります。 普段からDevToolsを使って、試⾏行行錯誤しながら 頑張って勉強していきましょう!
14.
Q&A
15.
console.log('%cThank you!!', 'color:
pinkʼ’); (@yoshikawa_̲t)
Download now