Skip to content

Instantly share code, notes, and snippets.

@mattdesl

mattdesl/debugger.js

Last active December 30, 2015 03:53
Show Gist options
  • Save mattdesl/5040b80e1f5422de636f to your computer and use it in GitHub Desktop.
Save mattdesl/5040b80e1f5422de636f to your computer and use it in GitHub Desktop.
Download ZIP
bug with setScriptSource ?
Raw
debugger.js
var Chrome = require('chrome-remote-interface')
Chrome({
chooseTab: function(tabs) {
var idx = 0
tabs.forEach(function(tab, i) {
if (tab.url === 'http://localhost:9966/')
idx = i
})
return idx
}
}, function(chrome) {
chrome.on('Debugger.scriptParsed', function(params) {
if (params.url.indexOf('http://') > -1) {
//will print ID of index.js e.g. 36
console.log("got script ID", params.scriptId)
//now to change index.js to something else
var r = Math.floor(Math.random() * 255)
chrome.Debugger.setScriptSource({
scriptId: params.scriptId,
scriptSource: ';document.body.style.background = "rgb(' + r + ',255,255);"',
}, function(err, msg) {
if (err)
console.log("Err with setScriptSource", params.scriptId, msg.message)
else
console.log(msg)
})
//getScriptSource always seems to work fine
chrome.Debugger.getScriptSource({
scriptId: params.scriptId
}, function(err, msg) {
if (err)
console.log("Err with getScriptSource", params.scriptId, msg.message)
else
console.log(msg)
})
}
});
chrome.Debugger.enable(function() {
console.log("Debugger enabled")
});
});
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="index.js"></script>
</body>
</html>
Raw
index.js
document.body.style.background = 'blue'
Raw
launch.md

first serve folder on 9966

http-server -p 9966

then open remote debugging chrome:

/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary http://localhost:9966/ --remote-debugging-port=9222

then run debugger

node debugger.js

and reload page in Chrome (without opening dev tools). Output:

Debugger enabled
got script ID 43
Err with setScriptSource 43 Uncaught Script not found
{ scriptSource: 'document.body.style.background = \'blue\'' }

On Chrome Canary 42.0.2303.0.

Same problem with Chrome 40.0.2214.111.

OSX Yosemite 10.10.1

@mattdesl
Copy link
Author

after more fiddling, the following script works fine:

function foo() {
    document.body.style.background = 'blue'
}

foo()

@paulirish
Copy link

You get Script not found because the script was collected.

Update your index.js to be this:

function foo(){

}
document.body.style.background = 'blue'

and you won't get the error anymore.

@paulirish
Copy link

But if you want live-edit you'll need to update function definitions anyway.

Here's where I went with this: https://gist.github.com/paulirish/920a260cadfe05e8388c

index.js:

function foo(){  document.body.style.background = 'blue' }

foo(); setInterval(foo, 1000);

debugger.js snippet

chrome.Debugger.setScriptSource({
                scriptId: params.scriptId,
                scriptSource: 'function foo(){ document.body.style.background = "hsl(' + r + ',50%,50%)"; }\n\nfoo(); setInterval(foo, 1000);'
            }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment