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

Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 
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
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 

Dernier (20)

HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
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
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
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...
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
[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
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 

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 ●