diff --git a/docs/authoring-development-workflow.html b/docs/authoring-development-workflow.html index 10fcf98..0cb143b 100644 --- a/docs/authoring-development-workflow.html +++ b/docs/authoring-development-workflow.html @@ -33,7 +33,7 @@ Chrome) to test resizing layouts

Navigate to a URL you wish to debug then toggle between dock-to-right and dock-to-window by clicking and long-holding on the -layout icon at the bottom left-hand corner of the DevTools.

+layout icon at the bottom left-hand corner of the DevTools.

@@ -333,7 +333,7 @@ complete this process. This will relaunch the browser.

-

When you now click the Settings cog +

When you now click the Settings cog , a new 'Experiments' tab will be available, where you can easily enable or disable experimental features.

diff --git a/docs/clean-testing-environment.html b/docs/clean-testing-environment.html index d04d90c..605ddca 100644 --- a/docs/clean-testing-environment.html +++ b/docs/clean-testing-environment.html @@ -1,13 +1,13 @@ {{+bindTo:partials.standard_devtools_article}}

Creating A Clean Testing Environment

- -

A clean testing environment allows you to to easily determine the point of -failure for your site or web application, rather than wondering if it was + +

A clean testing environment allows you to to easily determine the point of +failure for your site or web application, rather than wondering if it was something in the background that caused your slow-down or failure.

-

Apps, extensions, background processes and unnecessary tabs are only some of the -things that can impact your profiling figures and should be avoided where -possible. This is of particular relevance when you wish to accurately profile +

Apps, extensions, background processes and unnecessary tabs are only some of the +things that can impact your profiling figures and should be avoided where +possible. This is of particular relevance when you wish to accurately profile using the Timeline, Profiles or about:tracing.

To set up a clean testing environment: @@ -16,24 +16,24 @@ using the Timeline, Pro
  • Ensure Chrome is being run with a clean profile: diff --git a/docs/contributing-files/image03.png b/docs/contributing-files/image03.png deleted file mode 100644 index bb578df..0000000 Binary files a/docs/contributing-files/image03.png and /dev/null differ diff --git a/docs/contributing.md b/docs/contributing.md index 3617dec..01e9a04 100644 --- a/docs/contributing.md +++ b/docs/contributing.md @@ -230,7 +230,7 @@ Adjust the path to `chromeServerProfile` to be some writable directory in your s ### Step 3: Inspector inception Once Canary is open go to any web page (the page doesn't matter because you're -not going to use it for anything). Open up the DevTools for the page, and undock undock DevTools from the window so it is in a separate window.
    +not going to use it for anything). Open up the DevTools for the page, and undock undock DevTools from the window so it is in a separate window.
    Next, open a new tab or launch another instance of Chrome (either Chrome Stable or Canary) and go to [http://localhost:9222](http://localhost:9222). diff --git a/docs/dom-and-styles-files/images/image_22.png b/docs/dom-and-styles-files/images/image_22.png deleted file mode 100755 index 938227b..0000000 Binary files a/docs/dom-and-styles-files/images/image_22.png and /dev/null differ diff --git a/docs/dom-and-styles-files/images/image_23.png b/docs/dom-and-styles-files/images/image_23.png deleted file mode 100755 index 5332f6f..0000000 Binary files a/docs/dom-and-styles-files/images/image_23.png and /dev/null differ diff --git a/docs/dom-and-styles-files/images/image_24.png b/docs/dom-and-styles-files/images/image_24.png deleted file mode 100755 index 6640f19..0000000 Binary files a/docs/dom-and-styles-files/images/image_24.png and /dev/null differ diff --git a/docs/dom-and-styles-files/images/inspect-icon.png b/docs/dom-and-styles-files/images/inspect-icon.png deleted file mode 100644 index 05a1f98..0000000 Binary files a/docs/dom-and-styles-files/images/inspect-icon.png and /dev/null differ diff --git a/docs/dom-and-styles.html b/docs/dom-and-styles.html index a7580e8..a4ebbd2 100644 --- a/docs/dom-and-styles.html +++ b/docs/dom-and-styles.html @@ -839,7 +839,7 @@ global.animationData = global.animationData || {};
    @@ -1027,7 +1027,7 @@ element.className = 'active';
  • The currently selected element.
  • Ancestors of the currently selected element.
    • -

    If you find it excessive to view all event handlers, including those registered using event delegation, click Filter and select the menu item Selected Node Only which limits displayed event listeners to only those registered directly on the element.

    +

    If you find it excessive to view all event handlers, including those registered using event delegation, click Filter filter and select the menu item Selected Node Only which limits displayed event listeners to only those registered directly on the element.

    Note: Many Chrome extensions add their own event listeners onto the DOM.

    @@ -1103,7 +1103,7 @@ video, audio, div, .message, body *, time {

    After you have selected a valid CSS property, bring up suggestions for applicable CSS values by moving focus to the CSS property value field. For example, the property display suggests values such as block, flex, none, and others.

    Paste CSS into the Styles pane using Ctrl + V (or Cmd + V on Mac). Properties and their values are parsed and entered into the correct fields.

    Add a style rule

    -

    You may find it preferable to add styles along with a new selector. Click New Style Rule within the styles pane header bar to generate a new CSS rule.

    +

    You may find it preferable to add styles along with a new selector. Click New Style Rule plus within the styles pane header bar to generate a new CSS rule.

    @@ -1124,7 +1124,7 @@ video, audio, div, .message, body *, time {

    To set an element's state:

    Change history (Local modifications)

    @@ -1143,7 +1143,7 @@ video, audio, div, .message, body *, time {

    Make a modification to a CSS rule which originates from an external style sheet and notice the change shows in the local modifications pane.

    -

    Note: When you create a new rule using New Style Rule , the new rule doesn't belong to an existing stylesheet. DevTools adds it to a special inspector stylesheet. The inspector stylesheet can be edited in the Sources panel, like other files.

    +

    Note: When you create a new rule using New Style Rule plus, the new rule doesn't belong to an existing stylesheet. DevTools adds it to a special inspector stylesheet. The inspector stylesheet can be edited in the Sources panel, like other files.

    Explore the local modifications pane:

    @@ -177,7 +177,7 @@ set breakpoint on line 2 "dynamicScriptFunction()" disabled>Call function from dynamic script
  • You should stop on the breakpoint
    • -
  • Click the Continue button or hit F8 in DevTools window to resume
    • +
  • Click the Continue button or hit F8 in DevTools window to resume

    • @@ -199,11 +199,11 @@ function onMouseOver(event) { }

    @@ -223,13 +223,13 @@ function raiseAndCatchException() { }

    @@ -254,7 +254,7 @@ function raiseException() { } @@ -291,7 +291,7 @@ context menu
    Append child!
  • You should stop on appendChild function call
    • -
  • Click the Continue button or hit F8 in DevTools window to resume
    • +
  • Click the Continue button or hit F8 in DevTools window to resume
    • @@ -314,7 +314,7 @@ function retrieveData() { }
      -
    • Click the Add button on XHR Breakpoints sidebar pane on the right side +
    • Click the Add button on XHR Breakpoints sidebar pane on the right side of Sources panel
    • Type "data.txt" in text input and hit enter
      • @@ -322,7 +322,7 @@ of Sources panel call
    • Right-click on the newly created breakpoint and select Remove Breakpoint context menu item
      • -
    • Click the Continue button or hit F8 in DevTools window to resume
      • +
    • Click the Continue button or hit F8 in DevTools window to resume
    @@ -372,7 +372,7 @@ function hovermeMouseOut(event) { Hover me!
  • You should stop on mouseout event handler
    • -
  • Click the Continue button or hit F8 in DevTools window to resume
    • +
  • Click the Continue button or hit F8 in DevTools window to resume

    • @@ -470,7 +470,7 @@ frames and navigate to the corresponding locations in the code:

    You may also want to pause JavaScript execution next time exception is thrown and inspect its call stack, scope variables and state of your app. A tri-state -stop button ( ) 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.

    @@ -539,7 +539,7 @@ the DevTools:

    -

    And by clicking on the curly brace ("Pretty Print") icon in the bottom left +

    And by clicking on the curly brace ("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.

    diff --git a/docs/javascript-debugging/image_14.png b/docs/javascript-debugging/image_14.png deleted file mode 100755 index 2e4e393..0000000 Binary files a/docs/javascript-debugging/image_14.png and /dev/null differ diff --git a/docs/javascript-debugging/image_17.png b/docs/javascript-debugging/image_17.png deleted file mode 100755 index 2e4e393..0000000 Binary files a/docs/javascript-debugging/image_17.png and /dev/null differ diff --git a/docs/javascript-debugging/image_19.png b/docs/javascript-debugging/image_19.png deleted file mode 100755 index 471b38a..0000000 Binary files a/docs/javascript-debugging/image_19.png and /dev/null differ diff --git a/docs/javascript-debugging/image_24.png b/docs/javascript-debugging/image_24.png deleted file mode 100755 index 9d51225..0000000 Binary files a/docs/javascript-debugging/image_24.png and /dev/null differ diff --git a/docs/javascript-debugging/image_25.png b/docs/javascript-debugging/image_25.png deleted file mode 100755 index 2e4e393..0000000 Binary files a/docs/javascript-debugging/image_25.png and /dev/null differ diff --git a/docs/javascript-debugging/image_28.png b/docs/javascript-debugging/image_28.png deleted file mode 100755 index 2e4e393..0000000 Binary files a/docs/javascript-debugging/image_28.png and /dev/null differ diff --git a/docs/javascript-debugging/image_34.png b/docs/javascript-debugging/image_34.png deleted file mode 100755 index 88978a9..0000000 Binary files a/docs/javascript-debugging/image_34.png and /dev/null differ diff --git a/docs/javascript-debugging/image_45.png b/docs/javascript-debugging/image_45.png deleted file mode 100644 index 8d1a9c2..0000000 Binary files a/docs/javascript-debugging/image_45.png and /dev/null differ diff --git a/docs/javascript-debugging/image_9.png b/docs/javascript-debugging/image_9.png deleted file mode 100755 index 2e4e393..0000000 Binary files a/docs/javascript-debugging/image_9.png and /dev/null differ diff --git a/docs/javascript-memory-profiling.md b/docs/javascript-memory-profiling.md index 7a5dffa..62dac73 100644 --- a/docs/javascript-memory-profiling.md +++ b/docs/javascript-memory-profiling.md @@ -204,7 +204,7 @@ When investigating memory issues, the Timeline panel’s **Memory view** can be The first thing to do is identify a sequence of actions you suspect is leaking memory. This could be anything from navigating around a site, hovering, clicking, or otherwise somehow interacting with page in a way that seems to negatively impact performance more over time. -On the Timeline panel start recording (Ctrl + E or Cmd + E) and perform the sequence of actions you want to test. To force a full garbage collection click the trash icon (![](memory-profiling-files/image_8.png)) at the bottom. +On the Timeline panel start recording (Ctrl + E or Cmd + E) and perform the sequence of actions you want to test. To force a full garbage collection click the trash icon (![](../../images/collect-garbage.png)) at the bottom. Below we see a memory leak pattern, where some nodes are not being collected: @@ -253,13 +253,13 @@ On the Profiles panel, choose ** *Take Heap Snapshot* **, then click **Start** o ### Clearing snapshots -Snapshots can be removed (both from DevTools and renderers memory) by pressing the Clear all profiles icon (![](memory-profiling-files/image_14.png)): +Snapshots can be removed (both from DevTools and renderers memory) by pressing the Clear all profiles icon (![](../../images/clear.png)): ![](memory-profiling-files/image_15.png)

    Note: Closing the DevTools window will not delete collected profiles from the renderers memory. When reopening DevTools, all previously taken snapshots will reappear in the list of snapshots.

    -Remember that we mentioned earlier you can force GC from the DevTools as part of your snapshot workflow. When taking a Heap Snapshot, it is automatically forced. In Timeline it can be very convenient to force a GC by clicking on the trash can (Collect Garbage) button (). +Remember that we mentioned earlier you can force GC from the DevTools as part of your snapshot workflow. When taking a Heap Snapshot, it is automatically forced. In Timeline it can be very convenient to force a GC by clicking on the trash can (Collect Garbage) button (). diff --git a/docs/memory-profiling-files/image_14.png b/docs/memory-profiling-files/image_14.png deleted file mode 100644 index 44173de..0000000 Binary files a/docs/memory-profiling-files/image_14.png and /dev/null differ diff --git a/docs/mobile-emulation.html b/docs/mobile-emulation.html index e7577b8..2c752e3 100644 --- a/docs/mobile-emulation.html +++ b/docs/mobile-emulation.html @@ -66,7 +66,7 @@ make this process more straightforward.

    Notes