OLD | NEW |
1 <html> | 1 <html> |
2 <head> | 2 <head> |
3 <title>Cast shell remote debugging</title> | 3 <title>Cast shell remote debugging</title> |
4 <style> | 4 <style> |
| 5 .local-ui-link { |
| 6 background-color: #eee; |
| 7 border: 1px solid #ccc; |
| 8 color: #333; |
| 9 display: block; |
| 10 font-family: monospace; |
| 11 font-size: 11px; |
| 12 margin: 4px; |
| 13 padding: 4px; |
| 14 width: 100%; |
| 15 } |
| 16 |
| 17 .help { |
| 18 font-size: 11px; |
| 19 } |
5 </style> | 20 </style> |
| 21 </head> |
| 22 <body> |
| 23 |
| 24 <div id='caption'>Inspectable WebContents</div> |
| 25 <div id='items'></div> |
6 | 26 |
7 <script> | 27 <script> |
8 function onLoad() { | 28 window.addEventListener('load', function() { |
9 var tabs_list_request = new XMLHttpRequest(); | 29 var tabs_list_request = new XMLHttpRequest(); |
10 tabs_list_request.open("GET", "/json/list?t=" + new Date().getTime(), true); | 30 tabs_list_request.open("GET", "/json/list?t=" + new Date().getTime(), true); |
11 tabs_list_request.onreadystatechange = onReady; | 31 tabs_list_request.onreadystatechange = function() { |
12 tabs_list_request.send(); | 32 if (this.readyState == 4 && this.status == 200 && this.response) { |
13 } | |
14 | |
15 function onReady() { | |
16 if(this.readyState == 4 && this.status == 200) { | |
17 if(this.response != null) { | |
18 var responseJSON = JSON.parse(this.response); | 33 var responseJSON = JSON.parse(this.response); |
19 for (var i = 0; i < responseJSON.length; ++i) { | 34 for (var i = 0; i < responseJSON.length; ++i) { |
20 appendItem(responseJSON[i]); | 35 appendItem(responseJSON[i]); |
21 } | 36 } |
22 } | 37 } |
23 } | 38 }; |
24 } | 39 tabs_list_request.send(); |
| 40 }); |
25 | 41 |
26 function appendItem(item_object) { | 42 function appendItem(metadata) { |
27 var frontend_ref; | 43 var item_container = document.createElement('div'); |
28 if (item_object.devtoolsFrontendUrl) { | 44 var frontend_header = document.createElement('h3'); |
29 frontend_ref = document.createElement("a"); | 45 frontend_header.textContent = metadata.title || "(untitled tab)"; |
30 frontend_ref.href = item_object.devtoolsFrontendUrl; | 46 item_container.appendChild(frontend_header); |
31 frontend_ref.title = item_object.title; | 47 |
| 48 if (metadata.devtoolsFrontendUrl) { |
| 49 var frontend_link = document.createElement('a'); |
| 50 frontend_link.textContent = 'Remote Debugging (AppEngine)' |
| 51 frontend_link.href = metadata.devtoolsFrontendUrl; |
| 52 item_container.appendChild(frontend_link); |
| 53 |
| 54 var devtools_protocol_link = document.createElement('textarea'); |
| 55 devtools_protocol_link.className = 'local-ui-link'; |
| 56 devtools_protocol_link.value = metadata.devtoolsFrontendUrl.replace( |
| 57 "https://chrome-devtools-frontend.appspot.com", |
| 58 "chrome-devtools://devtools/remote"); |
| 59 // Highlight text when clicked. |
| 60 devtools_protocol_link.onclick = function() { this.select(); } |
| 61 item_container.appendChild(devtools_protocol_link); |
32 } else { | 62 } else { |
33 frontend_ref = document.createElement("div"); | 63 frontend_header.textContent += " (already has active debugging session)"; |
34 frontend_ref.title = "The tab already has active debugging session"; | |
35 } | 64 } |
36 | 65 |
37 var text = document.createElement("div"); | 66 document.getElementById("items").appendChild(item_container); |
38 if (item_object.title) | |
39 text.innerText = item_object.title; | |
40 else | |
41 text.innerText = "(untitled tab)"; | |
42 text.style.cssText = "background-image:url(" + item_object.faviconUrl + ")"; | |
43 frontend_ref.appendChild(text); | |
44 | |
45 var item = document.createElement("p"); | |
46 item.appendChild(frontend_ref); | |
47 | |
48 document.getElementById("items").appendChild(item); | |
49 } | 67 } |
50 </script> | 68 </script> |
51 </head> | 69 |
52 <body onload='onLoad()'> | 70 <h3>Help</h3> |
53 <div id='caption'>Inspectable WebContents</div> | 71 <div id="help"> |
54 <div id='items'></div> | 72 Note: there are two debugging options presented for each page above. Either |
| 73 is a valid way to initiate a remote debugging session. |
| 74 <ul> |
| 75 <li>For the first option (link), you may have to select the shield icon in |
| 76 the address bar to establish a connection. See the <a |
| 77 href="https://support.google.com/chrome/answer/1342714?hl=en">help |
| 78 center</a> for more information.</li> |
| 79 <li>For the second option (textarea), simply copy/paste the URL into |
| 80 Chrome's URL bar.</li> |
| 81 </ul> |
| 82 </div> |
| 83 |
55 </body> | 84 </body> |
56 </html> | 85 </html> |
OLD | NEW |