Skip to content

Commit 0de2b36

Browse files
paulirishpaulirish
committed
clean up homepage
1 parent 4dcb787 commit 0de2b36

File tree

2 files changed

+12
-63
lines changed

2 files changed

+12
-63
lines changed

‎pages/_includes/shell.hbs

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -48,11 +48,11 @@
4848
v8-inspector (node)
4949
</a>
5050
<a href="{{{ url '/1-3' }}}" name="1-3">
51-
stable RC (1.3)
52-
</a>
51+
stable (1.3)
52+
</a><!--
5353
<a href="{{{ url '/1-2' }}}" name="1-2">
5454
stable (1.2)
55-
</a>
55+
</a> -->
5656
</nav>
5757
</div>
5858

‎pages/index.md

Lines changed: 9 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -18,74 +18,25 @@ structure.
1818
<p><b><a href="tot/">The latest (tip-of-tree) protocol (tot)</a></b> —
1919
It <a href="https://chromium.googlesource.com/chromium/src/+log/HEAD/third_party/blink/renderer/core/inspector/browser_protocol.pdl">changes frequently</a>
2020
and can break at any time. However it captures the full capabilities of the Protocol, whereas the stable release is a subset.
21-
There is no backwards compatibility support guaranteed for the capabilities it introduces.
21+
There is no backwards compatibility support guaranteed.
2222

2323
<p><b><a href="v8/">v8-inspector protocol (v8)</a></b> —
24-
It is available in <a href="https://nodejs.org/en/blog/release/v6.3.0/">node 6.3+</a> and enables
24+
Enables
2525
<a href="https://medium.com/@paul_irish/debugging-node-js-nightlies-with-chrome-devtools-7c4a1b95ae27">debugging & profiling</a>
2626
of Node.js apps.
2727

2828
<p><b><a href="1-3/">stable 1.3 protocol (1-3)</a></b> —
2929
The stable release of the protocol, tagged at Chrome 64. It includes a smaller subset of the complete protocol compatibilities.
3030

31-
<p><b><a href="1-2/">stable 1.2 protocol (1-2)</a></b> —
32-
The stable release of the protocol, tagged at Chrome 54. It includes a smaller subset of the complete protocol compatibilities.
33-
3431
<h3>Resources</h3>
3532

36-
<p><a href="https://github.com/aslushnikov/getting-started-with-cdp/blob/master/README.md">Getting Started with CDP</a>
33+
<p>See <a href="https://github.com/aslushnikov/getting-started-with-cdp/blob/master/README.md">Getting Started with CDP</a>. The <a href="https://github.com/ChromeDevTools/awesome-chrome-devtools#chrome-devtools-protocol">awesome-chrome-devtools</a> page links to many of the tools in the protocol ecosystem, including protocol API libraries in JavaScript, TypeScript, Python, Java, and Go.
3734

3835
<p>The <a href="https://github.com/chromedevtools/devtools-protocol">devtools-protocol repo</a> issue tracker can also be
39-
used for concerns with the protocol. It also hosts the canonical copy of the json files.
40-
41-
<p>Useful: <a href="https://developers.google.com/web/updates/2017/04/headless-chrome">Getting Started with Headless Chrome</a>
42-
and the <a href="https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md">Headless Chromium readme</a>.
43-
44-
<p>The <a href="https://github.com/cyrus-and/chrome-remote-interface/">chrome-remote-interface</a> node module is recommended,
45-
and its <a href="https://github.com/cyrus-and/chrome-remote-interface/wiki">wiki</a> and
46-
<a href="https://github.com/cyrus-and/chrome-remote-interface/issues?utf8=%E2%9C%93&q=is%3Aissue%20">issue tracker</a> are full of useful recipes.
47-
<p>The <a href="https://github.com/ChromeDevTools/awesome-chrome-devtools#chrome-devtools-protocol">awesome-chrome-devtools</a> page links to many of the tools in the protocol ecosystem, including protocol API libraries in JavaScript, TypeScript, Python, Java, and Go.
48-
49-
<p>Consider subscribing to the <a href="https://groups.google.com/d/forum/chrome-debugging-protocol">chrome-debugging-protocol</a> mailing list.
50-
51-
<h3 id="remote">Basics: Using DevTools as protocol client</h3>
52-
<p>The Developer Tools front-end can attach to a remotely running Chrome instance for debugging.
53-
For this scenario to work, you should start your <i>host</i> Chrome instance with the remote-debugging-port
54-
command line switch:
55-
56-
<pre class="summary">chrome.exe --remote-debugging-port=9222</pre>
57-
58-
<p>Then you can start a separate <i>client</i> Chrome instance, using a distinct user profile:
59-
60-
<pre class="summary">chrome.exe --user-data-dir=&lt;some directory&gt;</pre>
61-
62-
<p>Now you can navigate to the given port from your <i>client</i> and attach to
63-
any of the discovered tabs for debugging: <a href="http://localhost:9222">http://localhost:9222</a>
64-
65-
<p>You will find the Developer Tools interface identical to the embedded one and here is why:
66-
67-
<ul>
68-
<li>When you navigate your <i>client</i> browser to the remote's Chrome port,
69-
Developer Tools front-end is being served from the <i>host</i> Chrome
70-
as a Web Application from the Web Server.
71-
</li>
72-
<li>It fetches HTML, JavaScript and CSS files over HTTP
73-
</li>
74-
<li>Once loaded, Developer Tools establishes a Web Socket connection to its
75-
host and starts exchanging JSON messages with it.
76-
</li>
77-
</ul>
78-
79-
<p>In this scenario, you can substitute Developer Tools front-end with your
80-
own implementation. Instead of navigating to the HTML page at
81-
http://localhost:9222, your application can discover available
82-
pages by requesting: <a href="http://localhost:9222/json">http://localhost:9222/json</a>
83-
and getting a JSON object with information about inspectable pages along
84-
with the WebSocket addresses that you could use in order to start
85-
instrumenting them. See the <a href="#endpoints">HTTP Endpoints</a> section below for more.
36+
used for concerns with the protocol. It also hosts the canonical copy of the json files. Consider subscribing to the <a href="https://groups.google.com/d/forum/chrome-debugging-protocol">chrome-debugging-protocol</a> mailing list.
8637

8738

88-
<h3 id="monitor">Listening to the protocol</h3>
39+
<h3 id="monitor">Monitoring the protocol</h3>
8940
<p>This is especially handy to understand how the DevTools frontend makes use of the protocol.
9041
You can view all requests/responses and methods as they happen.
9142

@@ -99,12 +50,12 @@ Click the gear icon in the top-right of the DevTools to open the <i>Settings</i>
9950
Select <i>Experiments</i> on the left of settings. Turn on "Protocol Monitor", then close and reopen DevTools.
10051
Now click the ⋮ menu icon, choose <i>More Tools</i> and then select <i>Protocol monitor</i>.
10152

102-
<p>You can also issue your own commands using Protocol Monitor (version 92.0.4497.0+). If the command does not require any parameters,
53+
<p>You can also issue your own commands using Protocol Monitor. If the command does not require any parameters,
10354
type the command into the prompt at the bottom of the Protocol Monitor panel and press Enter, for example,
10455
<code>Page.captureScreenshot</code>. If the command requires parameters, provide them as JSON, for example,
105-
<code>{"command":"Page.captureScreenshot","parameters":{"format": "jpeg"}}</code>.
56+
<code>{"cmd":"Page.captureScreenshot","args":{"format": "jpeg"}}</code>.
10657

107-
<p> By clicking on the icon next to the command input (available starting from Chrome version 117.0.5936.0), you can open the command editor. After you select a CDP command, the editor creates a structured form based on the protocol definitions that allows you to edit parameters, and view their documentation and types. Send the commands by clicking on the send button or using <code>Ctrl + Enter</code>. Use the context menu in the list of previously sent commands to open one of them in the editor.
58+
<p> By clicking on the icon next to the command input (in Chrome 117+), you can open the command editor. After you select a CDP command, the editor creates a structured form based on the protocol definitions that allows you to edit parameters, and view their documentation and types. Send the commands by clicking on the send button or using <code>Ctrl + Enter</code>. Use the context menu in the list of previously sent commands to open one of them in the editor.
10859

10960
<figure class="screenshot">
11061
<a href="images/cdp-editor.png" target="_blank" style="text-align: center; display:block;">
@@ -126,7 +77,6 @@ await Main.MainImpl.sendOverProtocol('Emulation.setDeviceMetricsOverride', {
12677

12778
const data = await Main.MainImpl.sendOverProtocol("Page.captureScreenshot");</pre>
12879

129-
<p>Note that this method is basically reaching into internals of the DevTools source code and there is no guarantee that it'd continue to work as DevTools evolves.
13080

13181
<h3 id="extension">DevTools protocol via Chrome extension</h3>
13282
<p>To allow chrome extensions to interact with the protocol, we introduced
@@ -165,8 +115,7 @@ and separately bindings generated for
165115
<h4 id="json">Can I get the protocol as JSON?</h4>
166116

167117
<p>These canonical .pdl files are mirrored on GitHub <a href="https://github.com/ChromeDevTools/devtools-protocol/">in the devtools-protocol repo</a>
168-
where JSON versions, TypeScript definitions and closure typedefs are generated. Most tools rely on
169-
<a href="https://github.com/ChromeDevTools/devtools-protocol/tree/master/json">these JSON versions</a>.
118+
where JSON versions, TypeScript definitions and closure typedefs are generated. It's published <a href="https://www.npmjs.com/package/devtools-protocol">regularly to NPM</a>.
170119

171120
<p>Also, if you've set <code>--remote-debugging-port=9222</code> with Chrome, the complete protocol version it speaks
172121
is available at <code>localhost:9222/json/protocol</code>.

0 commit comments

Comments
 (0)