SlideShare une entreprise Scribd logo
1  sur  19
Google Chrome Developer Tools
Hunter@20091211
First of All
chrome dev上網搜尋
Google Chrome releases
● Stable channel
● Beta channel
– latest features
– more stable than Dev
● Dev channel
– where ideas get tested (and sometimes
fail)
– usually require some manual
configuration
Getting Start
Ctrl Shift J
The Developer Tools Window
Ctrl - [ : iterate backward
Ctrl - ] : iterate forward
Esc : toggle console
The Elements Panel
Inspect elementToggle consoleDock/Undock
syntax highlighted
finding texts
CSS selectors
XPath
styles
toggle style
Edit a number property:
Up/Down
+ Alt : steps by 0.1
+ Shift : steps by 10
Add new style selectors
add new attributes
Metrics
Event listeners viewer
Console API
● console.log(object[, object, ...]) - Writes a message to
the console.
● console.warn(object[, object, ...]) - Writes a message to
the console with the visual "warning" icon.
● console.error(object[, object, ...]) - Writes a message to
the console with the visual "error" icon.
● console.assert(expression[, object, ...]) - Tests that an
expression is true. If not, it will write a message to the
console and throw an exception.
Console API
● $("id") - dumps node with id equal to "id" into the Console.
● $$("selector") - dumps nodes equal to the CSS selector
into the Console.
● $0 - contains most recently selected node. You can use it
to dump it into the console or in other console
expressions.
● $1 .. $5 - contain previously selected nodes.
● inspect(node) - selects given node in the Elements Panel.
● dir(node) - dumps node as a JavaScript object with its
properties into the Console.
● dirxml(node) - dumps node as an HTML subtree into the
Console.
The Scripts Panel
Set breakpoints
Pause here!
F8 : continue
F10 : step over
F11 : step into
Shift - F11 : step out
Ctrl - . : Next call frame
Ctrl - , : Previous call frame
Shift – Ctrl - E : Evaluate selection
References
● Early Access Release Channels
– http://www.chromium.org/getting-involved/dev-channel
● Google Chrome Developer Tools Tutorial
– http://www.chromium.org/devtools/google-chrome-developer-tools-tutorial
● Firebug Console API
– http://getfirebug.com/wiki/index.php/Console_API
● Firebug Command Line API
– http://getfirebug.com/commandline.html
●
chrome dev上網搜尋

Contenu connexe

Similaire à 20091211 google chrome_developer_tools

Microsoft (Silverlight)
Microsoft (Silverlight)Microsoft (Silverlight)
Microsoft (Silverlight)
Vinayak Hegde
 
MattsonTutorialSC14.pptx
MattsonTutorialSC14.pptxMattsonTutorialSC14.pptx
MattsonTutorialSC14.pptx
gopikahari7
 
[Td 2015] what is new in visual c++ 2015 and future directions(ulzii luvsanba...
[Td 2015] what is new in visual c++ 2015 and future directions(ulzii luvsanba...[Td 2015] what is new in visual c++ 2015 and future directions(ulzii luvsanba...
[Td 2015] what is new in visual c++ 2015 and future directions(ulzii luvsanba...
Sang Don Kim
 
Alexandre Iline Rit 2010 Java Fxui
Alexandre Iline Rit 2010 Java FxuiAlexandre Iline Rit 2010 Java Fxui
Alexandre Iline Rit 2010 Java Fxui
rit2010
 
Productivity Enhencement with Visual Studio
Productivity Enhencement with Visual StudioProductivity Enhencement with Visual Studio
Productivity Enhencement with Visual Studio
Ahasan Habib
 

Similaire à 20091211 google chrome_developer_tools (20)

PowerShell-1
PowerShell-1PowerShell-1
PowerShell-1
 
Chrome DevTools 101
Chrome DevTools 101Chrome DevTools 101
Chrome DevTools 101
 
Microsoft (Silverlight)
Microsoft (Silverlight)Microsoft (Silverlight)
Microsoft (Silverlight)
 
MattsonTutorialSC14.pptx
MattsonTutorialSC14.pptxMattsonTutorialSC14.pptx
MattsonTutorialSC14.pptx
 
Flash develop presentation
Flash develop presentationFlash develop presentation
Flash develop presentation
 
Kubernetes - State of the Union (Q1-2016)
Kubernetes - State of the Union (Q1-2016)Kubernetes - State of the Union (Q1-2016)
Kubernetes - State of the Union (Q1-2016)
 
MattsonTutorialSC14.pdf
MattsonTutorialSC14.pdfMattsonTutorialSC14.pdf
MattsonTutorialSC14.pdf
 
PowerShell Workshop Series: Session 2
PowerShell Workshop Series: Session 2PowerShell Workshop Series: Session 2
PowerShell Workshop Series: Session 2
 
Chrome DevTools
Chrome DevToolsChrome DevTools
Chrome DevTools
 
Advanced Eclipse Workshop (held at IPC2010 -spring edition-)
Advanced Eclipse Workshop (held at IPC2010 -spring edition-)Advanced Eclipse Workshop (held at IPC2010 -spring edition-)
Advanced Eclipse Workshop (held at IPC2010 -spring edition-)
 
[Td 2015] what is new in visual c++ 2015 and future directions(ulzii luvsanba...
[Td 2015] what is new in visual c++ 2015 and future directions(ulzii luvsanba...[Td 2015] what is new in visual c++ 2015 and future directions(ulzii luvsanba...
[Td 2015] what is new in visual c++ 2015 and future directions(ulzii luvsanba...
 
Alexandre Iline Rit 2010 Java Fxui
Alexandre Iline Rit 2010 Java FxuiAlexandre Iline Rit 2010 Java Fxui
Alexandre Iline Rit 2010 Java Fxui
 
Marco Liberati - Write once, debug everywhere
Marco Liberati - Write once, debug everywhereMarco Liberati - Write once, debug everywhere
Marco Liberati - Write once, debug everywhere
 
Hack Like It's 2013 (The Workshop)
Hack Like It's 2013 (The Workshop)Hack Like It's 2013 (The Workshop)
Hack Like It's 2013 (The Workshop)
 
Productivity Enhencement with Visual Studio
Productivity Enhencement with Visual StudioProductivity Enhencement with Visual Studio
Productivity Enhencement with Visual Studio
 
Intro to .NET and Core C#
Intro to .NET and Core C#Intro to .NET and Core C#
Intro to .NET and Core C#
 
Android studio
Android studioAndroid studio
Android studio
 
Android develop guideline
Android develop guidelineAndroid develop guideline
Android develop guideline
 
Features++
Features++Features++
Features++
 
C++ Windows Forms L01 - Intro
C++ Windows Forms L01 - IntroC++ Windows Forms L01 - Intro
C++ Windows Forms L01 - Intro
 

Dernier

Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 

Dernier (20)

[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 

20091211 google chrome_developer_tools

  • 1. Google Chrome Developer Tools Hunter@20091211
  • 2. First of All chrome dev上網搜尋
  • 3. Google Chrome releases ● Stable channel ● Beta channel – latest features – more stable than Dev ● Dev channel – where ideas get tested (and sometimes fail) – usually require some manual configuration
  • 5. The Developer Tools Window Ctrl - [ : iterate backward Ctrl - ] : iterate forward Esc : toggle console
  • 6. The Elements Panel Inspect elementToggle consoleDock/Undock
  • 10. Edit a number property: Up/Down + Alt : steps by 0.1 + Shift : steps by 10 Add new style selectors
  • 13. Console API ● console.log(object[, object, ...]) - Writes a message to the console. ● console.warn(object[, object, ...]) - Writes a message to the console with the visual "warning" icon. ● console.error(object[, object, ...]) - Writes a message to the console with the visual "error" icon. ● console.assert(expression[, object, ...]) - Tests that an expression is true. If not, it will write a message to the console and throw an exception.
  • 14. Console API ● $("id") - dumps node with id equal to "id" into the Console. ● $$("selector") - dumps nodes equal to the CSS selector into the Console. ● $0 - contains most recently selected node. You can use it to dump it into the console or in other console expressions. ● $1 .. $5 - contain previously selected nodes. ● inspect(node) - selects given node in the Elements Panel. ● dir(node) - dumps node as a JavaScript object with its properties into the Console. ● dirxml(node) - dumps node as an HTML subtree into the Console.
  • 17. Pause here! F8 : continue F10 : step over F11 : step into Shift - F11 : step out Ctrl - . : Next call frame Ctrl - , : Previous call frame Shift – Ctrl - E : Evaluate selection
  • 18. References ● Early Access Release Channels – http://www.chromium.org/getting-involved/dev-channel ● Google Chrome Developer Tools Tutorial – http://www.chromium.org/devtools/google-chrome-developer-tools-tutorial ● Firebug Console API – http://getfirebug.com/wiki/index.php/Console_API ● Firebug Command Line API – http://getfirebug.com/commandline.html ●