Merge branch 'master' of https://github.com/GoogleChrome/devtools-docs into screenshot-sprint

_book.yaml

@@ -18,11 +18,8 @@ toc:
   section:
   - title: "Demo: Finding Forced Synchronous Layouts"
     path: /chrome-developer-tools/docs/demos/too-much-layout
-- title: "Profiling JavaScript Performance"
+- title: "Profiling JavaScript"
   path: /chrome-developer-tools/docs/cpu-profiling
-  section:
-  - title: "Flame Chart"
-    path: /chrome-developer-tools/docs/flame-chart
 - title: "JavaScript Memory Profiling"
   path: /chrome-developer-tools/docs/javascript-memory-profiling
   section:
@@ -53,7 +50,9 @@ toc:
   path: /chrome-developer-tools/docs/tips-and-tricks
 - title: "Settings"
   path: /chrome-developer-tools/docs/settings
-- title: "Remote Debugging on Android"
+- title: "Rendering Settings"
+  path: /chrome-developer-tools/docs/rendering-settings
+- title: "Remote Debugging Chrome on Android"
   path: /chrome-developer-tools/docs/remote-debugging
   section:
   - title: "Debugging Protocol"
@@ -146,6 +145,8 @@ toc:
     path: /chrome-developer-tools/docs/sample-extensions
   - title: "Sample Debugging Protocol Clients"
     path: /chrome-developer-tools/docs/debugging-clients
+  - title: "DevTools Extensions Gallery"
+    path: /chrome-developer-tools/docs/extensions-gallery
 - title: "Additional Resources"
   section:
   - title: "Creating A Clean Testing Environment"

docs/_preview.html

@@ -11,7 +11,7 @@
 
 	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
 	<script id="jqueryui" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
-	<script src="boilerplate_files/markdown.min.js"></script>
+	<script src="boilerplate_files/marked.js"></script>
 
 
     <link rel="stylesheet" type="text/css" href="https://developers.google.com/chrome-developer-tools/css/local_extensions.css">

docs/boilerplate_files/preview.js

@@ -15,9 +15,9 @@
 	var content = jQuery('<div>').load(file, function(res){
 
 	        var self = $(this), ext = file.split(".");
-                
+
 	        if(ext[ext.length - 1] == "md")
-	        self[0].innerHTML = markdown.toHTML(res);
+	        self[0].innerHTML = marked.parse(res);
 	        self.prependTo('#gc-content')
 
 		// muck with the content

docs/console.md

@@ -101,7 +101,7 @@ The [`console.assert()`](console-api#consoleassertexpression_object) method cond
 
 ### Filtering console output ###
 
-You can quickly filter console output by its severity level--errors, warning, or standard log statements--by selecting one of the filter options along the bottom of the Console, as shown below.
+You can quickly filter console output by its severity level--errors, warning, or standard log statements--by selecting one of the filter options. Click on the filter funnel (as shown below) and then select which filter you want to use.
 
 ![Only show console.error() output](console-files/filter-errors.png)
 

docs/contributing.md

@@ -15,8 +15,8 @@ Aside from contributing to the source code for DevTools, all of the following
 are different ways you could help contribute:
 
 * **Documentation authoring**
-    * Both reference and tutorial guides benefit from your help
-    * Get in touch with [@addyosmani](http://twitter.com/addyosmani) or [@paul_irish](http://twitter.com/paul_irish)
+    * The [source](https://github.com/GoogleChrome/devtools-docs) for the DevTools documentation is on GitHub and contributions are always welcome. Both reference and tutorial guides benefit from your help.
+    * Get in touch with [@addyosmani](http://twitter.com/addyosmani) or [@paul_irish](http://twitter.com/paul_irish) for more information on how you can assist here.
 * **Share what you've learned**
     * Share what you've learned via GIFs, Vines or construction paper
     * Cover new experimental features
@@ -29,6 +29,7 @@ are different ways you could help contribute:
       for all reviews of pending code
     * Subscribe to the [RSS feed of devtools 
       commits](http://commits.peter.sh/feed/?tracker=devtools).
+    * Follow [@ChromeDevTools](http://twitter.com/ChromeDevTools) on Twitter which also includes a feed of all commits.
     * There's plenty of action and developers are eager to hear what's landing
 * **Designing improved UX for all parts of DevTools**
     * Your ideas on the design and UX are quite welcome, for example the [new 

docs/cpu-profiling.html

@@ -1,79 +1,173 @@
 {% include "chrome-developer-tools/_local_variables.html" %}
 <html devsite>
   <head>
-    <title>Profiling JavaScript performance</title>
+    <title>Profiling JavaScript Performance</title>
     <meta name="project_path" value="/chrome-developer-tools/_project.yaml" />
     <meta name="book_path" value="/chrome-developer-tools/_book.yaml" />
   </head>
   <body>
+  <link rel="stylesheet" type="text/css" href="/chrome-developer-tools/css/local_extensions.css"/>
+
+  <style>
+    body.docs div h4 { font-size: 111%; font-weight: bold; margin-bottom: 0; }
+  </style>
 
 
-<link rel="stylesheet" type="text/css" href="/chrome-developer-tools/css/local_extensions.css"/>
+  <strong>
+    <ul>
+      <li><a href="#cpu-profiles">Intro to JavaScript Profiling</a>
+      <li><a href="#flame-chart">Using the Flame Chart</a></li>
+    </ul>
+  </strong>
 
 
-
-<p>This tutorial explains how to collect and explore CPU profiles.</p>
-
-<p class="note"><b>Note:</b> If you are a Web Developer and want to get the
-latest version of Developer Tools, you should use the Google Chrome release
-from the <a href="http://dev.chromium.org/getting-involved/dev-channel">Developer
-Channel</a>.</p>
-
-<p>Using Google Chrome, open the <a href="http://v8.googlecode.com/svn/data/benchmarks/v7/run.html" target=
-"_blank">V8 Benchmark Suite</a> page. Click the <strong>Start
-profiling</strong> button. The circle changes to red. Now return to
-the V8 Benchmark Suite page, and either press
-<strong>F5</strong> or click the browser's <strong>Reload</strong> button
-to reload the page.</p>
-
-<p>When the page has completed reloading, a score for the benchmark tests
-is shown. Return to the Developer Tools window and click the <strong>Stop
-profiling</strong> button. The circle changes to gray.
-  <div class="screenshot"><img src="/chrome-developer-tools/docs/cpu-profiling-files/profiling_cpu_1.png"></div>This
-  <strong>Bottom Up</strong> view lists functions by impact on performance.
-  It also enables you to examine the calling paths to those functions.
-</p>
-
-<p>Now select the <strong>Top Down</strong> view by clicking the Bottom Up
-/ Top Down selection button. Then click the small arrow to the left of
-<strong>(program)</strong> in the <strong>Function</strong> column. The
-<strong>Top Down</strong> view shows an overall picture of the calling
-structure, starting at the top of the call stack.</p>
-
-<p class="note"><b>Note:</b> You can click the <strong>Percentage</strong> button to view absolute
-times.</p>
-
-<p>Select one of the functions in the <strong>Function</strong> column,
-then click the <strong>Focus selected function</strong> button (the Eye
-icon on the right).
-  <div class="screenshot"><img src="/chrome-developer-tools/docs/cpu-profiling-files/focus_selected_function.png"></div>This
-  filters the profile to show only the selected function and its callers.
-  Click the <strong>Reload</strong> button at the bottom-right of the
-  window to restore the profile to its original state.
-</p>
-
-<p>Select one of the functions in the <strong>Function</strong> column,
-then click the <strong>Exclude selected function</strong> button (the X
-icon). Depending on the function you selected, you should see something
-like this:
-  <div class="screenshot"><img src="/chrome-developer-tools/docs/cpu-profiling-files/exclude_selected_function.png"></div>The
-  <strong>Exclude selected function</strong> button removes the selected
-  function from the profile and charges its callers with the excluded
-  function's total time. Click the <strong>Reload</strong> button to
-  restore the profile to its original state.
-</p>
-
-<p>You can record multiple profiles. Click the <strong>Start
-profiling</strong> button, reload the V8 Benchmark page, then click the
-<strong>Stop profiling</strong> button.
-  <div class="screenshot"><img src="/chrome-developer-tools/docs/cpu-profiling-files/two_profiles.png"></div>The sidebar on the
-  left lists your recorded profiles, the tree view on the right shows the
-  information gathered for the selected profile.
-</p>
-
-<p class="backtotop"><a href="#top">Back to top</a></p>
+  <h2 id="cpu-profiles">Introduction to JavaScript Profiling</h2>
 
 
-  </body>
+  <p>Using Google Chrome, open the <a href="http://v8.googlecode.com/svn/data/benchmarks/v7/run.html" target=
+  "_blank">V8 Benchmark Suite</a> page. Click the <strong>Start
+  profiling</strong> button or press <span class="kbd">Cmd</span> + <span class="kbd">E</span> start recording a JavaScript CPU profile. Now refresh the V8 Benchmark Suite page.</p>
+
+  <p>When the page has completed reloading, a score for the benchmark tests
+  is shown. Return to the DevTools and stop the recording by clicking the Stop button or by pressing <span class="kbd">Cmd</span> + <span class="kbd">E</span> again.</p>
+
+  <div class="screenshot">
+    <img src="cpu-profiling-files/heavy-bottom-up.png">
+  </div>
+
+  <p>This <strong>Bottom Up</strong> view lists functions by impact on performance.
+    It also enables you to examine the calling paths to those functions.
+  </p>
+
+  <p>Now select the <strong>Top Down</strong> view by clicking the Bottom Up
+  / Top Down selection button. Then click the small arrow to the left of
+  <strong>(program)</strong> in the <strong>Function</strong> column. The
+  <strong>Top Down</strong> view shows an overall picture of the calling
+  structure, starting at the top of the call stack.</p>
+
+  <p class="note"><b>Note:</b> You can click the <strong>Percentage</strong> button to view absolute times.</p>
+
+  <p>Select one of the functions in the <strong>Function</strong> column,
+  then click the <strong>Focus selected function</strong> button (the Eye
+  icon on the right).</p>
+
+  <div class="screenshot">
+    <img src="cpu-profiling-files/focus-selected-function.png">
+  </div>
+
+  <p>This filters the profile to show only the selected function and its callers. Click the <strong>Reload</strong> button at the bottom-right of the window to restore the profile to its original state.</p>
+
+  <p>Select one of the functions in the <strong>Function</strong> column,
+  then click the <strong>Exclude selected function</strong> button (the X
+  icon). Depending on the function you selected, you should see something
+  like this:</p>
+
+  <div class="screenshot">
+    <img src="cpu-profiling-files/tree-top-down.png">
+  </div>
+
+  <p>The <strong>Exclude selected function</strong> button removes the selected function from the profile and charges its callers with the excluded function's total time. Click the <strong>Reload</strong> button to restore the profile to its original state.</p>
+
+  <p>You can record multiple profiles. Click the <strong>Start profiling</strong> button, reload the V8 Benchmark page, then click the <strong>Stop profiling</strong> button.</p>
+
+  <div class="screenshot">
+    <img src="cpu-profiling-files/sidebar-profile-history.png">
+  </div>
+
+  <p>The sidebar on the left lists your recorded profiles, the tree view on the right shows the information gathered for the selected profile.</p>
+
+
+  <h2 id="flame-chart">Using the Flame Chart</h2>
+
+  <p>The Flame Chart view provides a visual representation of JavaScript processing over time, similar to those found in the Timeline and Network panels. Using the <strong>Flame Chart</strong> feature on the Details view after performing a <em>JavaScript &amp; CPU profile</em>, you are able to view the profile data a few different ways.</p>
+
+  <h3>Visualizing execution paths</h3>
+
+  <p>By analyzing and understanding function call progression visually you can gain a better understanding of the execution paths within your app.</p>
+
+  <div class="screenshot">
+    <img src="cpu-profiling-files/flamechart00.png">
+  </div>
+
+
+  <h3>Identifying outliers with color coding</h3>
+
+  <p>When zoomed out you can identify repetitive patterns that could be optimized, or more importantly, you're able to spot outliers or unexpected executions much easier.</p>
+
+  <div class="screenshot">
+    <img src="cpu-profiling-files/flamechart-outliers.png">
+  </div>
+
+
+  <h3>Visualizing JavaScript profiler data against a time scale (like Timeline)</h3>
+
+  <p>Other JavaScript profiling reports data that is aggregated <em>over time</em>, whereas the Flame Chart reports data <em>by time</em>. This means when you see events happen, you are able to drill into the time scale of them and really get some perspective on execution of JavaScript. For example, when you see big streaks of yellow in the Timeline, this is the perfect way to see the issue.</p>
+
+  <div class="screenshot">
+    <img src="cpu-profiling-files/flamechart02.png">
+  </div>
+
+
+  <p>You may even want to do a Timeline recording simultaneously while you do a recording with the JavaScript Profiler. Here’s a snippet you can use to do this:</p>
+
+  <pre class="prettyprint">
+    <code>(function() {
+      console.timeline();
+      console.profile();
+      setTimeout(function() {
+          console.timelineEnd();
+          console.profileEnd();
+      }, 3000);
+    })();</code></pre>
+
+  <p class="note"><strong>Note</strong>: The horizontal axis is time and vertical axis is the call stack. Expensive functions are wide. Call stacks are represented on the Y axis, so a tall flame is not necessarily significant. Pay close attention to wide bars, no matter their position in the call stack.</p>
+
+
+  <h3>How to use the Flame Chart:</h3>
+
+  <ol>
+    <li>Open the DevTools and go to the Profiles panel.</li>
+    <li>Choose <strong>Record JavaScript CPU profile</strong> and click <strong>Start</strong>.</li>
+    <li>When you are done collecting data, click <strong>Stop</strong>.</li>
+  </ol>
+
+  <p>In the profile view, select the Flame Chart visualization from the select menu at the bottom of the DevTools.</p>
+
+  <div class="screenshot">
+    <img src="cpu-profiling-files/flamechart03.jpg">
+  </div>
+
+  <p class="note"><strong>Note</strong>: For increased accuracy of profiling times enable <strong>High resolution CPU profiling</strong> in the DevTools flame-chart under Profiling. When enabled, you can zoom into the graph to view it by a tenth of a millisecond even.</p>
+
+  <p>Across the top of the panel is an overview that shows the entire recording. You can zoom in on a specific region of the overview by selecting it with your mouse as shown below, and you can also pan left and right by clicking on the white area and dragging your mouse. The Details view timescale shrinks accordingly.</p>
+
+  <div class="screenshot">
+    <img src="cpu-profiling-files/flamechart04.png">
+  </div>
+
+  <p>In the Details view, a <strong>call stack</strong> is represented as a stack of function "blocks". A block that sits atop another was called by the lower function block. Hovering over a given block displays its function name and timing data:</p>
+
+  <div class="screenshot">
+    <img src="cpu-profiling-files/flamechart05.jpg">
+  </div>
+
+  <ul>
+    <li><strong>Name</strong> — The name of the function.</li>
+    <li><strong>Self time</strong> — How long it took to complete the current invocation of the function, including only the statements in the function itself, not including any functions that it called.</li>
+    <li><strong>Total time</strong> — The time it took to complete the current invocation of this function and any functions that it called.</li>
+    <li><strong>Aggregated self time</strong> — Aggregate time for all invocations of the function across the recording, not including functions called by this function.</li>
+    <li><strong>Aggregated total time</strong> — Aggregate total time for all invocations of the function, including functions called by this function.</li>
+  </ul>
+
+  <div class="screenshot">
+    <img src="cpu-profiling-files/flamechart06.png">
+  </div>
+
+  <p>Clicking a function block opens its containing JavaScript file in the Sources panel, at the line where the function is defined.</p>
+
+
+  <p class="backtotop"><a href="#top">Back to top</a></p>
+
+</body>
 </html>
 

docs/css-preprocessors.html

@@ -53,6 +53,9 @@ CSS files. Then DevTools reloads the newly-generated CSS file. </p>
 <aside class="note">Changes made in an <em>external</em> editor are not detected by DevTools until the Sources tab
 containing the associated source file regains focus. Also, manual editing of a CSS file generated by the Sass/LESS/other compiler will break the source map association until the page is reloaded.</aside>
 
+<aside class="note">If you're using Workspaces, you'll need to make sure the generated CSS file is also mapped into the workspace. You can verify this by looking in Sources panel right-side tree, and seeing the CSS is from your local folder.</aside>
+
+
 <h2 id="toc-requirements">Requirements</h2>
 
 <p>There are a few requirements to note when working with a CSS preprocessor:</p>
@@ -111,10 +114,11 @@ enable automatic reloading of generated CSS files. </p>
 
 <ul>
 <li>Sass: As described above, this is supported in the prerelease version of Sass.</li>
-<li>Compass: Uses Sass internally but doesn't support source maps yet. Support is scheduled for a future release. See <a href="https://github.com/chriseppstein/compass/issues/1293">Issue 1293</a>.</li>
+<li>Compass: <a href="https://github.com/chriseppstein/compass/blob/master/compass-style.org/content/CHANGELOG.markdown#100alpha16-12052013">Implemented in compass 1.0.0.alpha.16.</a>
 <li>Less: Implemented in 1.5.0. See <a href="https://github.com/less/less.js/issues/1050#issuecomment-25566463">issue #1050</a> for details and usage patterns.</li>
+<li>Autoprefixer: Implemented in 1.0. <a href="https://github.com/ai/autoprefixer#source-map">Autoprefixer docs</a> explain how to use it, along with absorbing an input sourcemap (from another preprocessor).</li>
+<li>Libsass: <a href="https://github.com/hcatlin/libsass/commit/366bc110c39c26c9267a1cc06e578beb94cd93ef">Implemented</a>.
 <li>Stylus: Under consideration. See <a href="https://github.com/LearnBoost/stylus/issues/1072">issue #1072</a>.</li>
-<li>Autoprefixer: In development. See <a href="https://github.com/ai/autoprefixer/issues/37">issue #37</a> where a fork with support is mentioned.</li>
 </ul>
 
 <h2 id="toc-how-css-source-maps-work">How CSS source maps work</h2>

docs/flame-chart.html

@@ -1,102 +0,0 @@
-{% include "chrome-developer-tools/_local_variables.html" %}
-<html devsite>
-  <head>
-    <title>Flame Chart</title>
-    <meta name="project_path" value="/chrome-developer-tools/_project.yaml" />
-    <meta name="book_path" value="/chrome-developer-tools/_book.yaml" />
-  </head>
-  <body>
-  <link rel="stylesheet" type="text/css" href="/chrome-developer-tools/css/local_extensions.css"/>
-
-  <style>
-  body.docs div h4 { font-size: 111%; font-weight: bold; margin-bottom: 0; }
-  img { max-width: 800px; }
-  div.screenshot img { border: 1px solid #ccc; margin-top: 0; }
-  .special {
-    background-color: #F9E5E5;
-    border-left-color: #C33;
-  }
-  </style>
-
-
-  <p>The Flame Chart view provides a visual representation of JavaScript processing over time, similar to those found in the Timeline and Network panels. Using the <strong>Flame Chart</strong> feature on the Details view after performing a <em>JavaScript &amp; CPU profile</em>, you are able to view the profile data a few different ways.</p>
-
-  <h2>Visualizing execution paths</h2>
-
-  <p>By analyzing and understanding function call progression visually you can gain a better understanding of the execution paths within your app.</p>
-
-
-  <img src="flame-chart-files/flamechart00.png">
-  <a href="http://letsfreecongress.com">http://letsfreecongress.com</a>
-
-
-  <h2>Identifying outliers with color coding</h2>
-
-  <p>When zoomed out you can identify repetitive patterns that could be optimized, or more importantly, you're able to spot outliers or unexpected executions much easier.</p>
-
-  <img src="flame-chart-files/flamechart01.png">
-  <a href="http://hellorun.helloenjoy.com/">http://hellorun.helloenjoy.com/</a>
-
-
-  <h2>Visualizing JavaScript profiler data against a time scale (like Timeline)</h2>
-
-  <p>Other JavaScript profiling reports data that is aggregated <em>over time</em>, whereas the Flame Chart reports data <em>by time</em>. This means when you see events happen, you are able to drill into the time scale of them and really get some perspective on execution of JavaScript. For example, when you see big streaks of yellow in the Timeline, this is the perfect way to see the issue.</p>
-
-  <img src="flame-chart-files/flamechart02.png">
-  <a href="http://hellorun.helloenjoy.com/">http://hellorun.helloenjoy.com/</a>
-
-
-  <p>You may even want to do a Timeline recording simultaneously while you do a recording with the JavaScript Profiler. Here’s a snippet you can use to do this:</p>
-
-  <pre class="prettyprint">
-    <code>(function() {
-      console.timeline();
-      console.profile();
-      setTimeout(function() {
-          console.timelineEnd();
-          console.profileEnd();
-      }, 3000);
-    })();</code></pre>
-
-  <p class="note"><strong>Note</strong>: The horizontal axis is time and vertical axis is the call stack. Expensive functions are wide. Call stacks are represented on the Y axis, so a tall flame is not necessarily significant. Pay close attention to wide bars, no matter their position in the call stack.</p>
-
-
-  <h2>How to use the Flame Chart:</h2>
-
-  <ol>
-    <li>Open the DevTools and go to the Profiles panel.</li>
-    <li>Choose <strong>Record JavaScript CPU profile</strong> and click <strong>Start</strong>.</li>
-    <li>When you are done collecting data, click <strong>Stop</strong>.</li>
-  </ol>
-
-  <p>In the profile view, select the Flame Chart visualization from the select menu at the bottom of the DevTools.</p>
-
-  <img src="flame-chart-files/flamechart03.jpg">
-
-  <p class="note"><strong>Note</strong>: For increased accuracy of profiling times enable <strong>High resolution CPU profiling</strong> in the DevTools flame-chart under Profiling. When enabled, you can zoom into the graph to view it by a tenth of a millisecond even.</p>
-
-  <p>Across the top of the panel is an overview that shows the entire recording. You can zoom in on a specific region of the overview by selecting it with your mouse as shown below, and you can also pan left and right by clicking on the white area and dragging your mouse. The Details view timescale shrinks accordingly.</p>
-
-  <img src="flame-chart-files/flamechart04.png">
-
-  <p>In the Details view, a <strong>call stack</strong> is represented as a stack of function "blocks". A block that sits atop another was called by the lower function block. Hovering over a given block displays its function name and timing data:</p>
-
-  <img src="flame-chart-files/flamechart05.jpg">
-
-  <ul>
-    <li><strong>Name</strong> — The name of the function.</li>
-    <li><strong>Self time</strong> — How long it took to complete the current invocation of the function, including only the statements in the function itself, not including any functions that it called.</li>
-    <li><strong>Total time</strong> — The time it took to complete the current invocation of this function and any functions that it called.</li>
-    <li><strong>Aggregated self time</strong> — Aggregate time for all invocations of the function across the recording, not including functions called by this function.</li>
-    <li><strong>Aggregated total time</strong> — Aggregate total time for all invocations of the function, including functions called by this function.</li>
-  </ul>
-
-  <img src="flame-chart-files/flamechart06.png">
-
-  <p>Clicking a function block opens its containing JavaScript file in the Sources panel, at the line where the function is defined.</p>
-
-
-  <p class="backtotop"><a href="#top">Back to top</a></p>
-
-</body>
-</html>

docs/javascript-debugging.html

@@ -83,15 +83,14 @@ graphical interface to the <a href="https://code.google.com/p/v8/">V8</a> debugg
 <strong>Sources</strong> panel:</p>
 
 <ul>
-<li>Open <a href="http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/hovercard.html">Google Closure hovercard demo
-page</a>.</li>
-<li>Open the DevTools window as described in the How to Access the DevTools
-section of this tutorial.</li>
+<li>Open a site such as the <a href="http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/hovercard.html">Google Closure hovercard demo
+page</a> or the <a href="http://todomvc.com/architecture-examples/angularjs/">TodoMVC</a> Angular app.</li>
+<li>Open the DevTools window.</li>
 <li>If it is not already selected, select <strong>Sources</strong>.</li>
 </ul>
 
 
-<p><div class="screenshot"><img src="javascript-debugging/image_0.png"/></div></p>
+<p><div class="screenshot"><img src="javascript-debugging/javascript-debugging-overview.jpg"/></div></p>
 
 <p>The <strong>Sources</strong> panel lets you see all the scripts that are part of the
 inspected page. Standard controls to pause, resume, and step through code are
@@ -100,7 +99,6 @@ exceptions is located at the bottom of the window. Sources are visible in
 separate tabs and clicking <img src="javascript-debugging/image_1.png"/> opens the file navigator
 which will display all open scripts.</p>
 
-<p><div class="screenshot"><img src="javascript-debugging/image_2.png"/></div></p>
 
 <h3>Execution control</h3>
 
@@ -145,29 +143,28 @@ aspects of an application.</p>
 <p>First, open the DevTools by hitting the <strong>Control-Shift-I</strong> shortcut. Click the
 <strong>line gutter</strong> to set a breakpoint for that line of code, select another script
 and set another breakpoint.</p>
-<div class="screenshot"><img src="javascript-debugging/image_3.png"/></div> <p>
+<div class="screenshot"><img src="javascript-debugging/sources-view-region.jpg"/></div> <p>
 All the breakpoints you have set appear under <strong>Breakpoints</strong> in the right-hand
 sidebar. Breakpoints can be enabled or disabled using the checkboxes in this
 sidebar.</p>
-<div class="screenshot"><img src="javascript-debugging/image_4.png"/></div> <p>
+<div class="screenshot"><img src="javascript-debugging/sources-breakpoints-region.jpg"/></div> <p>
 Clicking on the entry jumps to the <strong>highlighted line</strong> in the source file. You
 can <strong>set</strong> one or more breakpoints in one or more scripts.</p>
-<div class="screenshot"><img src="javascript-debugging/image_5.png"/></div> <p>
+<div class="screenshot"><img src="javascript-debugging/multiple-breakpoints-region.jpg"/></div> <p>
 Delete a breakpoint by clicking the <strong>blue tag</strong> breakpoint indicator. The
 breakpoint indicator menu has several options including "Continue to here",
 "Edit Breakpoint", "Disable Breakpoint" and "Save As", which will save the file
 locally.</p>
-<div class="screenshot"><img src="javascript-debugging/image_6.png"/></div> <p>
+<div class="screenshot"><img src="javascript-debugging/continue-to-here-region.jpg"/></div> <p>
 Once you have set a breakpoint, you can right-click on the blue arrow tag
 indicator in the gutter line to set a <strong>conditional statement</strong> for that
 specific breakpoint. Type any expression and the breakpoint will pause only if
 the condition is true. The tag cycles through its three states of active,
 inactive, and removed.</p>
- <div class="screenshot"><img src="javascript-debugging/image_7.png"/></div>
+ <div class="screenshot"><img src="javascript-debugging/conditional-breakpoint-region.jpg"/></div>
 <p>
-Click the <strong>Pause</strong> button then move your mouse over the Google Closure
-hovercard demo page.  </p>
-<div class="screenshot"><img src="javascript-debugging/image_8.png"/></div> <p>
+Click the <strong>Pause</strong> button then interact with your page.  </p>
+<div class="screenshot"><img src="javascript-debugging/callstack-region.jpg"/></div> <p>
 While a script is paused, you can see the current call stack and in-scope
 variables in the right-hand side bar. The call stack displays the <strong>complete execution path</strong> that led to the point where code was paused, giving us insights into the code flaws that caused the error.</p>
 
@@ -175,9 +172,11 @@ variables in the right-hand side bar. The call stack displays the <strong>comple
 
 <aside class="special">
   Remember: the console will be evaluating within the scope of where the debugger is currently paused.
+  <p>
   <div class="screenshot">
-    <img src="javascript-debugging/breakpoint-scope.png">
+    <img src="javascript-debugging/evaluate-while-paused.jpg">
   </div>
+</p>
 
 </aside>
 
@@ -206,21 +205,21 @@ arguments etc.</li>
 </ul>
 
 
-<p><div class="screenshot"><img src="javascript-debugging/image_10.png"/></div></p>
+<p><div class="screenshot"><img src="javascript-debugging/live-editing-mouseout.jpg"/></div></p>
 
 
 <p class="backtotop"><a href="#top">Back to top</a></p>
 
 <h3 id="breakpoints-dynamic-javascript">Breakpoints in Dynamic JavaScript</h3>
 
-<a href="/chrome-developer-tools/docs/scripts-breakpoints-files/dynamicScript.js" style="display: none">
+<a href="/chrome-developer-tools/docs/javascript-debugging/dynamicScript.js" style="display: none">
   This is used to mark dynamicScript.js as used.</a>
 
 {% framebox height="500px" %}
 <script>
 function loadDynamicScript() {
   var request = new XMLHttpRequest();
-  request.open('GET','https://developers.google.com/chrome-developer-tools/docs/scripts-breakpoints-files/dynamicScript.js', true);
+  request.open('GET','https://developers.google.com/chrome-developer-tools/docs/javascript-debugging/dynamicScript.js', true);
   request.send();
   request.onreadystatechange = function() {
     if (request.readyState != 4)
@@ -243,11 +242,11 @@ set breakpoint on line 2</li>
 <li>Click the <strong>Continue</strong> <img class="ui" src="javascript-debugging/image_9.png"/> button or hit <strong>F8</strong> in DevTools window to resume</li>
 </ul>
 
-<p><div class="screenshot"><img src="javascript-debugging/image_12.png"/></div></p>
+<p><div class="screenshot"><img src="javascript-debugging/dynamic-script.jpg"/></div></p>
 
 {% endframebox %}
 
-<p><strong>Note:</strong> Notice the <code>"//@ sourceURL=dynamicScript.js"</code> line at the end of
+<p><strong>Note:</strong> Notice the <code>"//# sourceURL=dynamicScript.js"</code> line at the end of
 dynamicScript.js file. This technique gives a name to a script created with eval, and will be discussed in more detail in the <a href="#source-maps">Source Maps</a> section. Breakpoints can be set in dynamic JavaScript only if it has a user supplied
 name.</p>
 
@@ -271,7 +270,7 @@ function onMouseOver(event) {
   function</li>
 <li>Click the <strong>Continue</strong> <img class="ui" src="javascript-debugging/image_14.png"/> button or hit <strong>F8</strong> in DevTools window to resume</li>
 </ul>
-<p><div class="screenshot"><img src="javascript-debugging/image_15.png"/></div></p>
+<p><div class="screenshot"><img src="javascript-debugging/continue-to-resume.jpg"/></div></p>
 
 {% endframebox %}
 
@@ -299,7 +298,7 @@ function raiseAndCatchException() {
   "source-code">raiseAndCatchException</span> function</li>
 <li>Click the <strong>Continue</strong> <img class="ui" src="javascript-debugging/image_17.png"/> button or hit <strong>F8</strong> in DevTools window to resume</li>
 </ul>
-<p><div class="screenshot"><img src="javascript-debugging/image_18.png"/></div></p>
+<p><div class="screenshot"><img src="javascript-debugging/append-child.jpg"/></div></p>
 
 {% endframebox %}
 
@@ -336,7 +335,7 @@ caught</li>
 </ul>
 
 
-<p><div class="screenshot"><img src="javascript-debugging/image_21.png"/></div></p>
+<p><div class="screenshot"><img src="javascript-debugging/raise-exception.jpg"/></div></p>
 
 {% endframebox %}
 
@@ -366,7 +365,7 @@ select <strong>Break on Subtree Modifications</strong></li>
 </ul>
 
 
-<p><div class="screenshot"><img src="javascript-debugging/image_23.png"/></div></p>
+<p><div class="screenshot"><img src="javascript-debugging/append-child-element.jpg"/></div></p>
 
 {% endframebox %}
 
@@ -374,14 +373,14 @@ select <strong>Break on Subtree Modifications</strong></li>
 
 <h2 id="breakpoints-on-xhr">Breakpoints on XHR</h2>
 
-<a href="/chrome-developer-tools/docs/scripts-breakpoints-files/data.txt" style="display: none">
+<a href="/chrome-developer-tools/docs/javascript-debugging/data.txt" style="display: none">
   This is used to mark data.txt as used.</a>
 
 {% framebox height="500px" %}
 <script>
 function retrieveData() {
   var request = new XMLHttpRequest();
-  request.open('GET','scripts-breakpoints-files/data.txt', true);
+  request.open('GET','javascript-debugging/data.txt', true);
   request.send();
 }
 </script>
@@ -398,7 +397,7 @@ context menu item</li>
 </ul>
 
 
-<p><div class="screenshot"><img src="javascript-debugging/image_26.png"/></div></p>
+<p><div class="screenshot"><img src="javascript-debugging/request-send.jpg"/></div></p>
 
 {% endframebox %}
 
@@ -437,7 +436,7 @@ function hovermeMouseOut(event) {
 </ul>
 
 
-<p><div class="screenshot"><img src="javascript-debugging/image_27.png"/></div></p>
+<p><div class="screenshot"><img src="javascript-debugging/resumed.jpg"/></div></p>
 
 <ul>
 <li>Move your mouse across the box below:</li>
@@ -447,7 +446,7 @@ function hovermeMouseOut(event) {
 <li>You should stop on <code>mouseout</code> event handler</li>
 <li>Click the <strong>Continue</strong> <img class="ui" src="javascript-debugging/image_28.png"/> button or hit <strong>F8</strong> in DevTools window to resume</li>
 </ul>
-<p><div class="screenshot"><img src="javascript-debugging/image_29.png"/></div></p>
+<p><div class="screenshot"><img src="javascript-debugging/continue-to-resume.jpg"/></div></p>
 {% endframebox %}
 
 
@@ -482,7 +481,7 @@ navigate to the onMouseOut() function</li>
 </ul>
 
 
-<p><div class="screenshot"><img src="javascript-debugging/image_30.png"/></div></p>
+<p><div class="screenshot"><img src="javascript-debugging/houseMouseOut.jpg"/></div></p>
 
 <ul>
 <li>Click the <strong>pause</strong> button to pause debugging</li>
@@ -494,7 +493,7 @@ sure to Save As.</li>
 </ul>
 
 
-<p><div class="screenshot"><img src="javascript-debugging/image_31.png"/></div></p>
+<p><div class="screenshot"><img src="javascript-debugging/pause-resume-mouseout.jpg"/></div></p>
 
 <p>This allows you to saved changes from within the DevTools without having to
 leave your browser.</p>
@@ -519,7 +518,7 @@ DevTools, you should use <a href="tools.google.com/dlpage/chromesxs">Chrome Cana
 Cmd+Option+J) and find a number of JavaScript error messages there. Each message
 has a link to the file name with the line number you can navigate to.</p>
 
-<p><div class="screenshot"><img src="javascript-debugging/image_32.png"/></div></p>
+<p><div class="screenshot"><img src="javascript-debugging/tracking-exceptions.jpg"/></div></p>
 
 <p class="backtotop"><a href="#top">Back to top</a></p>
 
@@ -531,7 +530,7 @@ opened</strong>, exceptions in the console are accompanied with the <strong>comp
 JavaScript call stacks</strong>. You can expand these console messages to see the stack
 frames and navigate to the corresponding locations in the code:</p>
 
-<p><div class="screenshot"><img src="javascript-debugging/image_33.png"/></div></p>
+<p><div class="screenshot"><img src="javascript-debugging/exception-stack-trace.jpg"/></div></p>
 
 <p class="backtotop"><a href="#top">Back to top</a></p>
 
@@ -544,7 +543,7 @@ and URL --> ) at the bottom of the Scripts panel enables you to switch between
 different exception handling modes: you can choose to either pause on all
 exception or only on the uncaught ones or you can ignore exceptions altogether.</p>
 
-<p><div class="screenshot"><img src="javascript-debugging/image_35.png"/></div></p>
+<p><div class="screenshot"><img src="javascript-debugging/pause-execution.jpg"/></div></p>
 
 <p class="backtotop"><a href="#top">Back to top</a></p>
 
@@ -562,7 +561,7 @@ doing that.</p>
 <p>Each Error object has a string property named stack that contains the stack
 trace:</p>
 
-<p><div class="screenshot"><img src="javascript-debugging/image_36.png"/></div></p>
+<p><div class="screenshot"><img src="javascript-debugging/error-stack.jpg"/></div></p>
 
 <p class="backtotop"><a href="#top">Back to top</a></p>
 
@@ -571,7 +570,7 @@ trace:</p>
 <p>You can instrument your code with console.trace() calls that would print current
 JavaScript call stacks:</p>
 
-<p><div class="screenshot"><img src="javascript-debugging/image_37.png"/></div></p>
+<p><div class="screenshot"><img src="javascript-debugging/console-trace.jpg"/></div></p>
 
 <p class="backtotop"><a href="#top">Back to top</a></p>
 
@@ -581,7 +580,7 @@ JavaScript call stacks:</p>
 console.assert() with the error condition as the first parameter. Whenever this
 expression evaluates to false you will see a corresponding console record:</p>
 
-<p><div class="screenshot"><img src="javascript-debugging/image_38.png"/></div></p>
+<p><div class="screenshot"><img src="javascript-debugging/console-assert.jpg"/></div></p>
 
 <p class="backtotop"><a href="#top">Back to top</a></p>
 
@@ -595,7 +594,7 @@ passed as three arguments in that order. You may find it convenient to set an
 error handler that would collect information about uncaught exceptions and
 report it back to your server.</p>
 
-<p><div class="screenshot"><img src="javascript-debugging/image_39.png"/></div></p>
+<p><div class="screenshot"><img src="javascript-debugging/window-onerror.jpg"/></div></p>
 
 <p class="backtotop"><a href="#top">Back to top</a></p>
 
@@ -606,13 +605,13 @@ DevTools, a pretty printing option is available to make life easier. Here is how
 a minified script displayed in the tools might look prior to being displayed in
 the DevTools:</p>
 
-<p><div class="screenshot"><img src="javascript-debugging/image_40.png"/></div></p>
+<p><div class="screenshot"><img src="javascript-debugging/pretty-print-off.jpg"/></div></p>
 
 <p>And by clicking on the curly brace <img src="javascript-debugging/image_45.png"/> ("Pretty Print") icon in the bottom left
 corner, the JavaScript is transformed into a more human readable form. This is
 also more easy for debugging and setting breakpoints.</p>
 
-<p><div class="screenshot"><img src="javascript-debugging/image_41.png"/></div></p>
+<p><div class="screenshot"><img src="javascript-debugging/pretty-print-on.jpg"/></div></p>
 
 
 <p class="backtotop"><a href="#top">Back to top</a></p>
@@ -649,13 +648,13 @@ generated JavaScript you can do a lookup in the source map which returns the
 original location. The DevTools can parse the source map automatically and make
 it appear as though you're running unminified and uncombined files.</p>
 
-<p><div class="screenshot"><img src="javascript-debugging/image_42.png"/></div></p>
+<p><div class="screenshot"><img src="javascript-debugging/source-mapping.jpg"/></div></p>
 
 <p>Before you view the following real world implementation of Source Maps make sure
 you've enabled the Source Maps feature by clicking the settings cog in the dev
 tools panel and checking the "Enable source maps" option.</p>
 
-<p><div class="screenshot"><img src="javascript-debugging/image_43.png"/></div></p>
+<p><div class="screenshot"><img src="javascript-debugging/source-maps.jpg"/></div></p>
 
 <p>Take a look at the special build of the <a href="http://dev.fontdragr.com">font dragr tool</a> in Chrome,
 with source mapping enabled, and you'll notice that the JavaScript isn't
@@ -674,7 +673,7 @@ there are also tools available that support outputting Source Maps for
 CoffeeScript and SASS. A special comment is placed at the end of the file, signifying to the DevTools
 that a source map is available.</p>
 
-<p><code>//@ sourceMappingURL=/path/to/file.js.map</code></p>
+<p><code>//# sourceMappingURL=/path/to/file.js.map</code></p>
 
 <p>This enables DevTools to map calls back to their location in original source
 files. If you don't like the idea of the weird comment you can alternatively set
@@ -692,12 +691,12 @@ comments.</p>
 <p>While not part of the source map spec the following convention allows you to
 make development much easier when working with evals.</p>
 
-<p>This helper looks very similar to the <code>//@ sourceMappingURL</code> property and is
+<p>This helper looks very similar to the <code>//# sourceMappingURL</code> property and is
 actually mentioned in the source map V3 specifications. By including the
 following special comment in your code, which will be evaled, you can name evals
 so they appear as more logical names in your dev tools.</p>
 
-<p><code>//@ sourceURL=source.coffee</code></p>
+<p><code>//# sourceURL=source.coffee</code></p>
 
 <p><strong>Working with sourceURL</strong></p>
 
@@ -717,7 +716,7 @@ abstractions.</li>
 </ul>
 
 
-<p><div class="screenshot"><img src="javascript-debugging/image_44.png"/></div></p>
+<p><div class="screenshot"><img src="javascript-debugging/coffeescript.jpg"/></div></p>
 
 <p><h4>Read more</h4></p>