Submit Search
Upload
Chrome Devtools for beginners (v1.1)
•
45 likes
•
7,176 views
yoshikawa_t
Follow
2013/12/13に開催された第4回HTML5ビギナーズの資料です。
Read less
Read more
Technology
Report
Share
Report
Share
1 of 43
Download now
Download to read offline
Recommended
Chrome Developer Toolsを使いこなそう!
Chrome Developer Toolsを使いこなそう!
yoshikawa_t
困った時のDev toolsの使い方(初心者向け)
困った時のDev toolsの使い方(初心者向け)
yoshikawa_t
Chrome DevTools.next
Chrome DevTools.next
yoshikawa_t
TechFeedというテクノロジーキュレーションサービスを作った話
TechFeedというテクノロジーキュレーションサービスを作った話
yoshikawa_t
Sencha touch vs j query mobile
Sencha touch vs j query mobile
yoshikawa_t
Chrome Apps & Chromeウェブストア概要
Chrome Apps & Chromeウェブストア概要
yoshikawa_t
モバイル時代のWebパフォーマンス
モバイル時代のWebパフォーマンス
yoshikawa_t
Chrome DevTools for beginners v1.2
Chrome DevTools for beginners v1.2
yoshikawa_t
Recommended
Chrome Developer Toolsを使いこなそう!
Chrome Developer Toolsを使いこなそう!
yoshikawa_t
困った時のDev toolsの使い方(初心者向け)
困った時のDev toolsの使い方(初心者向け)
yoshikawa_t
Chrome DevTools.next
Chrome DevTools.next
yoshikawa_t
TechFeedというテクノロジーキュレーションサービスを作った話
TechFeedというテクノロジーキュレーションサービスを作った話
yoshikawa_t
Sencha touch vs j query mobile
Sencha touch vs j query mobile
yoshikawa_t
Chrome Apps & Chromeウェブストア概要
Chrome Apps & Chromeウェブストア概要
yoshikawa_t
モバイル時代のWebパフォーマンス
モバイル時代のWebパフォーマンス
yoshikawa_t
Chrome DevTools for beginners v1.2
Chrome DevTools for beginners v1.2
yoshikawa_t
いまさら聞けないHTML5概要
いまさら聞けないHTML5概要
yoshikawa_t
Chrome packaged appsをデバッグ
Chrome packaged appsをデバッグ
yoshikawa_t
jQuery MobileとHTML5
jQuery MobileとHTML5
yoshikawa_t
モバイル時代のWebパフォーマンスTips
モバイル時代のWebパフォーマンスTips
yoshikawa_t
Chromeでjavascriptデバッグ!まず半歩♪
Chromeでjavascriptデバッグ!まず半歩♪
Yuji Nojima
HTML5 のお話
HTML5 のお話
tomo_masakura
jQuery Mobile
jQuery Mobile
yoshikawa_t
Chrome Apps 概要
Chrome Apps 概要
yoshikawa_t
Titanium
Titanium
yono05
今流行りのウェブアプリ開発環境Yeoman
今流行りのウェブアプリ開発環境Yeoman
tomo_masakura
View Customize Pluginで出来ること
View Customize Pluginで出来ること
onozaty
GPL: WordPress 4つの自由と ビジネスモデル / WordCamp Tokyo 2015 講演スライド
GPL: WordPress 4つの自由と ビジネスモデル / WordCamp Tokyo 2015 講演スライド
Shinichi Nishikawa
GUI Test is (not) necessary
GUI Test is (not) necessary
Hiroshi Maekawa
OmegaTでドキュメント翻訳
OmegaTでドキュメント翻訳
Takako Miyagawa
Basis of Firefox Apps
Basis of Firefox Apps
dynamis
MTプラグイン入門以前
MTプラグイン入門以前
Hiroshi Yamato
20150425 DroidKaigi つかえるGradleプロジェクトの作り方
20150425 DroidKaigi つかえるGradleプロジェクトの作り方
Makoto Yamazaki
PHPUnitでリファクタリング
PHPUnitでリファクタリング
Takako Miyagawa
KotlinでWebアプリ開発
KotlinでWebアプリ開発
Ryo Nakagawa
最近のブラウザ状況
最近のブラウザ状況
yoshikawa_t
Chrome apps for mobile 概要
Chrome apps for mobile 概要
yoshikawa_t
Html5概要 & デモ
Html5概要 & デモ
yoshikawa_t
More Related Content
What's hot
いまさら聞けないHTML5概要
いまさら聞けないHTML5概要
yoshikawa_t
Chrome packaged appsをデバッグ
Chrome packaged appsをデバッグ
yoshikawa_t
jQuery MobileとHTML5
jQuery MobileとHTML5
yoshikawa_t
モバイル時代のWebパフォーマンスTips
モバイル時代のWebパフォーマンスTips
yoshikawa_t
Chromeでjavascriptデバッグ!まず半歩♪
Chromeでjavascriptデバッグ!まず半歩♪
Yuji Nojima
HTML5 のお話
HTML5 のお話
tomo_masakura
jQuery Mobile
jQuery Mobile
yoshikawa_t
Chrome Apps 概要
Chrome Apps 概要
yoshikawa_t
Titanium
Titanium
yono05
今流行りのウェブアプリ開発環境Yeoman
今流行りのウェブアプリ開発環境Yeoman
tomo_masakura
View Customize Pluginで出来ること
View Customize Pluginで出来ること
onozaty
GPL: WordPress 4つの自由と ビジネスモデル / WordCamp Tokyo 2015 講演スライド
GPL: WordPress 4つの自由と ビジネスモデル / WordCamp Tokyo 2015 講演スライド
Shinichi Nishikawa
GUI Test is (not) necessary
GUI Test is (not) necessary
Hiroshi Maekawa
OmegaTでドキュメント翻訳
OmegaTでドキュメント翻訳
Takako Miyagawa
Basis of Firefox Apps
Basis of Firefox Apps
dynamis
MTプラグイン入門以前
MTプラグイン入門以前
Hiroshi Yamato
20150425 DroidKaigi つかえるGradleプロジェクトの作り方
20150425 DroidKaigi つかえるGradleプロジェクトの作り方
Makoto Yamazaki
PHPUnitでリファクタリング
PHPUnitでリファクタリング
Takako Miyagawa
KotlinでWebアプリ開発
KotlinでWebアプリ開発
Ryo Nakagawa
What's hot
(19)
いまさら聞けないHTML5概要
いまさら聞けないHTML5概要
Chrome packaged appsをデバッグ
Chrome packaged appsをデバッグ
jQuery MobileとHTML5
jQuery MobileとHTML5
モバイル時代のWebパフォーマンスTips
モバイル時代のWebパフォーマンスTips
Chromeでjavascriptデバッグ!まず半歩♪
Chromeでjavascriptデバッグ!まず半歩♪
HTML5 のお話
HTML5 のお話
jQuery Mobile
jQuery Mobile
Chrome Apps 概要
Chrome Apps 概要
Titanium
Titanium
今流行りのウェブアプリ開発環境Yeoman
今流行りのウェブアプリ開発環境Yeoman
View Customize Pluginで出来ること
View Customize Pluginで出来ること
GPL: WordPress 4つの自由と ビジネスモデル / WordCamp Tokyo 2015 講演スライド
GPL: WordPress 4つの自由と ビジネスモデル / WordCamp Tokyo 2015 講演スライド
GUI Test is (not) necessary
GUI Test is (not) necessary
OmegaTでドキュメント翻訳
OmegaTでドキュメント翻訳
Basis of Firefox Apps
Basis of Firefox Apps
MTプラグイン入門以前
MTプラグイン入門以前
20150425 DroidKaigi つかえるGradleプロジェクトの作り方
20150425 DroidKaigi つかえるGradleプロジェクトの作り方
PHPUnitでリファクタリング
PHPUnitでリファクタリング
KotlinでWebアプリ開発
KotlinでWebアプリ開発
Similar to Chrome Devtools for beginners (v1.1)
最近のブラウザ状況
最近のブラウザ状況
yoshikawa_t
Chrome apps for mobile 概要
Chrome apps for mobile 概要
yoshikawa_t
Html5概要 & デモ
Html5概要 & デモ
yoshikawa_t
初めてのHtml5 20120612
初めてのHtml5 20120612
yohei iwakura
Chrome Extensionでスクリーンシェアをやってみる
Chrome Extensionでスクリーンシェアをやってみる
Yusuke Naka
Thing.jsについて
Thing.jsについて
Masakazu Muraoka
これからのモバイルWebと最新動向
これからのモバイルWebと最新動向
yoshikawa_t
Attractive HTML5
Attractive HTML5
Sho Ito
Swaggerのさわりだけ
Swaggerのさわりだけ
Masakazu Muraoka
DartPad+CodePenで、Flutterを体験してみよう
DartPad+CodePenで、Flutterを体験してみよう
cch-robo
Silverlight 4 のはなし
Silverlight 4 のはなし
terurou
HTML5の話
HTML5の話
Hiroyuki Nozaki
HTML5でOpen Dataをやってみた
HTML5でOpen Dataをやってみた
Masakazu Muraoka
パンダの会 Html5概説
パンダの会 Html5概説
Masakazu Muraoka
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜
Masakazu Muraoka
Introduction to Favmemo for Immature Engineers
Introduction to Favmemo for Immature Engineers
Takeshi Arabiki
Androidとは何か
Androidとは何か
Koji Shigemura
リモートデバッグツール Weinerをつかってみた
リモートデバッグツール Weinerをつかってみた
Masakazu Muraoka
HTML5時代のwebクリエイターに必要なこと
HTML5時代のwebクリエイターに必要なこと
Masakazu Muraoka
Htmlのコトバ
Htmlのコトバ
Masakazu Muraoka
Similar to Chrome Devtools for beginners (v1.1)
(20)
最近のブラウザ状況
最近のブラウザ状況
Chrome apps for mobile 概要
Chrome apps for mobile 概要
Html5概要 & デモ
Html5概要 & デモ
初めてのHtml5 20120612
初めてのHtml5 20120612
Chrome Extensionでスクリーンシェアをやってみる
Chrome Extensionでスクリーンシェアをやってみる
Thing.jsについて
Thing.jsについて
これからのモバイルWebと最新動向
これからのモバイルWebと最新動向
Attractive HTML5
Attractive HTML5
Swaggerのさわりだけ
Swaggerのさわりだけ
DartPad+CodePenで、Flutterを体験してみよう
DartPad+CodePenで、Flutterを体験してみよう
Silverlight 4 のはなし
Silverlight 4 のはなし
HTML5の話
HTML5の話
HTML5でOpen Dataをやってみた
HTML5でOpen Dataをやってみた
パンダの会 Html5概説
パンダの会 Html5概説
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜
JavaScriptで ごく普通にhttp通信をする 〜esp8266+espruinoでhttp getリクエストをするテスト〜
Introduction to Favmemo for Immature Engineers
Introduction to Favmemo for Immature Engineers
Androidとは何か
Androidとは何か
リモートデバッグツール Weinerをつかってみた
リモートデバッグツール Weinerをつかってみた
HTML5時代のwebクリエイターに必要なこと
HTML5時代のwebクリエイターに必要なこと
Htmlのコトバ
Htmlのコトバ
More from yoshikawa_t
Ionicで作るTechfeed
Ionicで作るTechfeed
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
いまさら聞けない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
jQuery Mobileカスタマイズ自由自在 v1.2
jQuery Mobileカスタマイズ自由自在 v1.2
yoshikawa_t
jQuery Mobileバレしないモバイルサイトの作り方
jQuery Mobileバレしないモバイルサイトの作り方
yoshikawa_t
More from yoshikawa_t
(13)
Ionicで作るTechfeed
Ionicで作るTechfeed
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
いまさら聞けない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
jQuery Mobileカスタマイズ自由自在 v1.2
jQuery Mobileカスタマイズ自由自在 v1.2
jQuery Mobileバレしないモバイルサイトの作り方
jQuery Mobileバレしないモバイルサイトの作り方
Recently uploaded
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Toru Tamaki
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
Hiroki Ichikura
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
sugiuralab
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
taisei2219
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Toru Tamaki
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
danielhu54
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Ryo Sasaki
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Toru Tamaki
Recently uploaded
(10)
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Chrome Devtools for beginners (v1.1)
1.
Chrome DevTools for beginners Version 1.1 2013/12/13 第4回HTML5ビギナーズ Toru Yoshikawa (@yoshikawa_̲t)
2.
Who? 吉川 徹 /
Toru Yoshikawa @yoshikawa_̲t html5j/HTML5とか勉強会スタッフ/ビ ギナー部 (副部⻑⾧長) Google Developer Experts (Chrome) HTML5 Experts.jp エキスパートNo.3 Web先端技術味⾒見見部 (顧問)/⽇日本jQuery Mobileユーザー会 (管理理⼈人)/Sublime Text 2 Japan Users Group (管理理⼈人)な どなど Blog: http://d.hatena.ne.jp/pikotea/
3.
ChromeでのWeb開発の 基礎知識識
4.
ブラウザの挙動 Chrome、Safariは、同じWebkitというレンダリングエンジンで動作する ため、ほぼ同様の動作をする(しかし、最近Chromeは、Blinkというエン ジンにフォークして移⾏行行したため段々と差異異が出てくるものと思われる) JavaScriptエンジンはそれぞれ違うので若若⼲干注意(互換性の問題はほとん どなし) Webkit > JavaScriptCore Chrome
> V8 (Node.jsもV8を利利⽤用している) Firefox > SpiderMonkey JavaScript⾼高速化等のTipsはだいたい同じように効果がある
5.
特殊URL chrome:で始まるURLで設定やデバッグ⽤用の有⽤用な情報 を参照することができる chrome://about でURL⼀一覧を表⽰示 chrome://flags >
各種設定 chrome://appcache-‐‑‒internals > AppCacheの管理理 chrome://net-‐‑‒internals > ネットワーク情報 etc...
6.
Canary ビルド HTML5、Chrome Developer
Toolsの最新の機能が 利利⽤用できる プロファイルがStableと別になっているので、 Stableと同時に利利⽤用できる 新しいので⾒見見た⽬目が若若⼲干異異なることがある https://www.google.co.jp/intl/ja/chrome/ browser/canary.html
7.
Canary ビルド Chrome Developer
Toolsの実験的機能の有効 chrome://flags Settings
8.
Developer Tools
9.
起動⽅方法 右クリックメニュー「要素の検証」 ショートカット Windows: Ctrl +
Shift + I or F12 Mac:⌥ + ⌘ + I 右上のメニューアイコンから
10.
機能概要 Elements … 要素・スタイルの確認・編集 Resources
… ファイル構成・リソース(Web Storageなど)の確認 Network … ネットワークアクセスの確認・分析 Sources … ソースファイルの確認・保存、JavaScriptのデバッグ Timeline … パフォーマンスの測定と分析 Profiles … CPU、メモリ状況、CSSセレクターのプロファイル Audits … ネットワーク、サイトスピードのチェック・推奨事項 Console … エラーログ表⽰示、JavaScript・コンソールコマンドの実⾏行行
11.
ツールバー
12.
表⽰示位置変更更 Dock to right Dock
to bottom Window アイコンクリックで切切り替え アイコン⻑⾧長押しで、リストがポップアップ
13.
設定 キャッシュを無効 Ajaxをログ表⽰示
14.
要素を⾒見見つける
15.
要素を⾒見見つける (Elementsパネル) HTMLビューで要素にマウスカーソルを当ててみる 右クリックメニュー「要素の検証」 検索索 Windows: Ctrl +
F Mac: ⌘ + F インスペクターモード
16.
要素のハイライト
17.
インスペクターモード
18.
要素を編集してみる
19.
編集モード 右クリックメニュー ダブルクリック・タブで移動 HTML編集のショートカット(F2)
20.
その他の操作 ドラッグ&ドロップで要素の移動 要素の削除 Del 要素の表⽰示・⾮非表⽰示 H 編集内容をもとに戻す Windows: Ctrl +
Z Mac: ⌘ + Z
21.
要素に適⽤用されている スタイルを確認・編集する
22.
スタイルの確認と編集 Computed Style …
要素に適⽤用されているスタイル Styles … 要素に適⽤用されているCSSルール Metrics … 要素のボックスモデルの状態
23.
Computed Style
24.
Styles
25.
スタイルの編集・状態の変更更 (リアルタイムに反映)
26.
Metrics
27.
その他の操作 上下キーで値の増減 Shiftキー押しながら ±10 ずつ Altキー押しながら
±0.1 ずつ カラーアイコンをクリックでカラーピッカー サジェスト Ctrl+スペース タブで選択、→で決定
28.
サイトのリソース状況を 確認する
29.
サイトのリソース状況を確認 する(Resourcesパネル) Web SQL IndexedDB Local Storage Session
Storage Cookies Application Cache
30.
クッキーの確認
31.
Local Storageの確認
32.
モバイルのデバッグ
33.
モバイルのデバッグ モバイル環境をエミュレートして表⽰示する リモートデバッグ
34.
設定(Overrides)
35.
設定(Overrides)
36.
リモートデバッグ(v31以前) Chrome for Androidで動作 Chrome
Web Storeで「ADB」をインストール https://chrome.google.com/webstore/detail/adb/ dpngiggdglpdnjdoaefidgiigpemgage
37.
リモートデバッグ(v31以前) USBデバッグで接続 Start ADB >
View Inspect Target
38.
リモートデバッグ(v32以降降) インストールは⼀一切切不不要 chrome://inspect を表⽰示
39.
その他の⾯面⽩白い機能 Workspace Port forwarding Layer Panel etc…
40.
まとめ DevToolsには、まだまだ説明しきれない便便利利な 使い⽅方がたくさんあります! 開発効率率率が⾶飛躍的に向上しますので、まずは是 ⾮非、使ってみて下さい ⽇日々、いろいろな改善・機能追加がおこなわれて いるのでCanaryで試してみましょう
41.
Next Step 「Chrome Developer
Toolsを使いこなそ う」 http://www.slideshare.net/ yoshikawa_̲t/chrome-‐‑‒developer-‐‑‒ tools-‐‑‒17787728 続きはChrome本で!(PR) Chrome Developer Toolsの使い⽅方につ いて100ページ以上にわたって解説 http://amzn.to/12eKqmt
42.
Thank you!! (@yoshikawa_̲t)
43.
Resources https://developers.google.com/chrome-‐‑‒ developer-‐‑‒tools/ https://developers.google.com/live/chrome/ http://anti-‐‑‒code.com/devtools-‐‑‒cheatsheet/
Download now