| 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 |