241 строка
6.8 KiB
HTML
241 строка
6.8 KiB
HTML
{% include "chrome-developer-tools/_local_variables.html" %}
|
|
<html devsite>
|
|
<head>
|
|
<title>Videos</title>
|
|
<meta name="project_path" value="/chrome-developer-tools/_project.yaml" />
|
|
<meta name="book_path" value="/chrome-developer-tools/_book.yaml" />
|
|
</head>
|
|
<body>
|
|
|
|
|
|
<style>
|
|
embed {
|
|
padding: 10px;
|
|
}
|
|
</style>
|
|
|
|
|
|
|
|
<p>The following videos will help you to start learning about the Google
|
|
Chrome Developer Tools:</p>
|
|
|
|
<ol class="toc">
|
|
<li> <a href="#getting_started">Getting Started</a> </li>
|
|
<li> <a href="#elements_resources">Inspecting Elements and Resources</a> </li>
|
|
<li> <a href="#debugging">Debugging JavaScript</a> </li>
|
|
<li> <a href="#profiling">Profiling and Optimizing</a> </li>
|
|
<li> <a href="#timeline">Timeline Panel</a> </li>
|
|
<li> <a href="#consolepower">Become a Javascript Console Power-User</a> </li>
|
|
<li> <a href="#google_io_2010">Google IO 2010 session</a> </li>
|
|
<li> <a href="#google_io_2011">Google IO 2011 session</a> </li>
|
|
<li> <a href="#google_io_2012">Google IO 2012 session</a><font color="red"><sup> NEW!</sup> </font> </li>
|
|
</ol>
|
|
|
|
<h2 id="getting_started"> Getting Started </h2>
|
|
|
|
<p>The following video describes how to start
|
|
to interact with the developer tools, the panels within the developer
|
|
tools window, and the interactive console.<p>
|
|
<p>
|
|
<object width="425"
|
|
height="355">
|
|
<param name="movie"
|
|
value="https://www.youtube.com/v/7cqh7MGLgaM?rel=1">
|
|
<param name="wmode"
|
|
value="transparent">
|
|
<embed src="https://www.youtube.com/v/7cqh7MGLgaM?rel=1"
|
|
type="application/x-shockwave-flash"
|
|
wmode="transparent"
|
|
width="425"
|
|
height="355">
|
|
</object>
|
|
</p>
|
|
<p class="backtotop"><a href="#top">Back to top</a></p>
|
|
|
|
<h2 id="elements_resources"> Inspecting Elements and Resources </h2>
|
|
|
|
<p>The following video describes how to:</p>
|
|
|
|
<ul>
|
|
<li>inspect elements</li>
|
|
<li>change style properties</li>
|
|
<li>edit DOM attributes</li>
|
|
<li>view and edit position metrics</li>
|
|
<li>view a timeline for network activities</li>
|
|
<li>view XHR information.</li>
|
|
</ul>
|
|
|
|
<p>
|
|
<object width="425"
|
|
height="355">
|
|
<param name="movie"
|
|
value="https://www.youtube.com/v/Mhb4n0yGYT4?rel=1">
|
|
<param name="wmode"
|
|
value="transparent">
|
|
<embed src="https://www.youtube.com/v/Mhb4n0yGYT4?rel=1"
|
|
type="application/x-shockwave-flash"
|
|
wmode="transparent"
|
|
width="425"
|
|
height="355">
|
|
</object>
|
|
</p>
|
|
<p class="backtotop"><a href="#top">Back to top</a></p>
|
|
|
|
<h2 id="debugging"> Debugging JavaScript </h2>
|
|
|
|
<p>The following video describes the
|
|
graphical interface to the V8 debugger and how to:</p>
|
|
<ul>
|
|
<li>set a break point</li>
|
|
<li>pause</li>
|
|
<li>zoom through code</li>
|
|
<li>step through code</li>
|
|
<li>view the current call stack and in scope variables</li>
|
|
</ul>
|
|
|
|
<p>
|
|
<object width="425"
|
|
height="355">
|
|
<param name="movie"
|
|
value="https://www.youtube.com/v/c_oiQYirKuY?rel=1">
|
|
<param name="wmode"
|
|
value="transparent">
|
|
<embed src="https://www.youtube.com/v/c_oiQYirKuY?rel=1"
|
|
type="application/x-shockwave-flash"
|
|
wmode="transparent"
|
|
width="425"
|
|
height="355">
|
|
</object>
|
|
</p>
|
|
<p class="backtotop"><a href="#top">Back to top</a></p>
|
|
|
|
<h2 id="profiling"> Profiling and Optimizing </h2>
|
|
|
|
<p>The following video describes how
|
|
to use the built in CPU, and heap profilers to understand where
|
|
resources are being spent and so helps you to optimize your code.</p>
|
|
<p>
|
|
<object width="425"
|
|
height="355">
|
|
<param name="movie"
|
|
value="https://www.youtube.com/v/OxW1dCjOstE?rel=1">
|
|
<param name="wmode"
|
|
value="transparent">
|
|
<embed src="https://www.youtube.com/v/OxW1dCjOstE?rel=1"
|
|
type="application/x-shockwave-flash"
|
|
wmode="transparent"
|
|
width="425"
|
|
height="355">
|
|
</object>
|
|
</p>
|
|
<p class="backtotop"><a href="#top">Back to top</a></p>
|
|
|
|
<h2 id="timeline"> Timeline Panel </h2>
|
|
|
|
<p>The following video describes how to use the timeline panel to get
|
|
information on where time is spent when loading your web app or page.</p>
|
|
|
|
<p>
|
|
<object width="425"
|
|
height="355">
|
|
<param name="movie"
|
|
value="https://www.youtube.com/v/RhaWYQ44WEc?rel=1">
|
|
<param name="wmode"
|
|
value="transparent">
|
|
<embed src="https://www.youtube.com/v/RhaWYQ44WEc?rel=1"
|
|
type="application/x-shockwave-flash"
|
|
wmode="transparent"
|
|
width="425"
|
|
height="355">
|
|
</object>
|
|
</p>
|
|
<p class="backtotop"><a href="#top">Back to top</a></p>
|
|
|
|
<h2 id="consolepower"> Become a Javascript Console Power-User </h2>
|
|
|
|
<p>Level up on the Javascript console in the Chrome DevTools. Look at XHR requests, learn console helper functions to monitor events or explore objects better. Paul Irish from the Chrome team gives you a rundown.</p>
|
|
|
|
<p>
|
|
<object width="425"
|
|
height="355">
|
|
<param name="movie"
|
|
value="https://www.youtube.com/v/4mf_yNLlgic?rel=1">
|
|
<param name="wmode"
|
|
value="transparent">
|
|
<embed src="https://www.youtube.com/v/4mf_yNLlgic?rel=1"
|
|
type="application/x-shockwave-flash"
|
|
wmode="transparent"
|
|
width="425"
|
|
height="355">
|
|
</object>
|
|
|
|
</p>
|
|
<p class="backtotop"><a href="#top">Back to top</a></p>
|
|
|
|
<h2 id="google_io_2011"> Google IO 2011 session </h2>
|
|
|
|
<p>The following video was recorded during the Chrome Developer Tools
|
|
session at Google IO 2011.</p>
|
|
|
|
<p>
|
|
<object width="425"
|
|
height="355">
|
|
<param name="movie"
|
|
value="https://www.youtube.com/v/N8SS-rUEZPg?rel=1">
|
|
<param name="wmode"
|
|
value="transparent">
|
|
<embed src="https://www.youtube.com/v/N8SS-rUEZPg?rel=1"
|
|
type="application/x-shockwave-flash"
|
|
wmode="transparent"
|
|
width="425"
|
|
height="355">
|
|
</object>
|
|
</p>
|
|
<p class="backtotop"><a href="#top">Back to top</a></p>
|
|
|
|
<h2 id="google_io_2010"> Google IO 2010 session </h2>
|
|
|
|
<p>The following video was recorded during the Chrome Developer Tools
|
|
session at Google IO 2010.</p>
|
|
|
|
<p>
|
|
<object width="425"
|
|
height="355">
|
|
<param name="movie"
|
|
value="https://www.youtube.com/v/TH7sJbyXHuk?rel=1">
|
|
<param name="wmode"
|
|
value="transparent">
|
|
<embed src="https://www.youtube.com/v/TH7sJbyXHuk?rel=1"
|
|
type="application/x-shockwave-flash"
|
|
wmode="transparent"
|
|
width="425"
|
|
height="355">
|
|
</object>
|
|
</p>
|
|
<p class="backtotop"><a href="#top">Back to top</a></p>
|
|
|
|
<h2 id="google_io_2012"> Google IO 2012: Chrome Developer Tools Evolution </h2>
|
|
|
|
<p>Follow Pavel Feldman and Sam Dutton in a review of the newest Developer Tools features: mobile debugging, editing, new Timeline "Frame Mode" and much more.</p>
|
|
|
|
<p>
|
|
<object width="425"
|
|
height="355">
|
|
<param name="movie"
|
|
value="https://www.youtube.com/v/3pxf3Ju2row?rel=1">
|
|
<param name="wmode"
|
|
value="transparent">
|
|
<embed src="https://www.youtube.com/v/3pxf3Ju2row?rel=1"
|
|
type="application/x-shockwave-flash"
|
|
wmode="transparent"
|
|
width="425"
|
|
height="355">
|
|
</object>
|
|
</p>
|
|
<p class="backtotop"><a href="#top">Back to top</a></p>
|
|
|
|
|
|
</body>
|
|
</html>
|
|
|