When I dynamically load a snippet of html containing javascript via AJAX, I cannot see that content in the source tab in the developer tools window in Chrome 22.0.1229.94. Tellingly, I went here
https://developers.google.com/chrome-developer-tools/docs/scripts-breakpoints#js_dynamic
This page shows an example developer tools window which is out of date. There is a button on the page to load a dynamic script and it does not show up in the source tab when you do.
As a work-around, I have found that adding
debugger;
to the script and reloading it will cause it to pause in the dynamically loaded code, but unfortunately, all the line numbers are greyed out and you can't set any breakpoints within the debugger.
Am I missing something here or what?
Thanks,
Rob
When you use a library or javascript code that you have loaded it dynamically, you can use the phrase
//# sourceURL=foo.js
at the beginning of your javascript code that foo.js is the name that will be assigned it. debugger will show it with that name.
This is true in chrome, and I think in firebug too.
In this case you can place a breakpoint in the dynamically loaded javascript code.
Possible duplicate of:
Is possible to debug dynamic loading JavaScript by some debugger like WebKit, FireBug or IE8 Developer Tool?
Don't know if this works or not in chrome (This definitely doesn't work for me now, may be in the past).
//# sourceURL=foo.js
Working Solution
For your dynamically loaded script via ajax to appear in your chrome source tool, you need to add the following line at the start or end (I prefer) location of your script file:
//# sourceURL=foo.js
And your script with name foo.js will appear at the left pane of source tab under (no domain) dropdown
->localhost
-- source/src
->(no domain)
-- foo.js
Alternatively you can add the below line in your script anywhere between the scripts.
debugger;
In chrome, you can use " debugger; " statement to break at a statement when debugger panel is open. Chrome will simply ignore this if the debugger panel is closed.
This will help stop your script in debugging mode and you will see your script in source (debugging) panel with name like VM****.
Hope this helps.
You can use //# sourceURL. Chrome doesn't seem to be supporting //# sourceURL for inline scripts. However, it does work on eval expressions. This article gives more details about naming eval blocks and naming of any anonymous functions in your code.
Instead of using eval, you can try embedding a script tag or JSONP may be.
Varunkumar Nagarajan
for me it happened on nodejs project.
i restarted server and open in new tab my app and tada!..
Alternatively, to fix this problem you can open developer tool in a seprate window by clicking the icon. Now reload your script, and it will shown in script tab as expected. I know this is not a solution but a work arround.
Related
Is there a way to execute an executable file(.bat/.sh) from a webview? I have a button on a webview and would like to run the executable when that button is clicked. I looked into window.open(...) and ActiveXObject() but since a webview is not a browser window, they are irrelevant.
You could do this by contributing a Command which executes the script, and then creating a link that runs that command using a command URI in the WebView.
Let's call the command my.ext.runScript. Then we can add in our webview:
Run Script
Clicking that link will then invoke the script.
edit: Example
edit 2: You can also pass a message from the webview to your extension to invoke the command - documentation here.
Good luck!
I believe this is not possible. You don't have any browser or Node.js environment available in the web view. Also for security reasons the webview is pretty limited in what it can do, besides showing HTML content.
I was able to find a way. A webview communicates with your node env using the vscode api using the postMessage function. In the node env, you can spawn and handle a child process.
Docs:
VSCode postMessage
Node childProcess
Edit 1:
Example: VSCode Extension Tutorial
Let me know if you need further help. Thanks (:
I just started playing with google chrome apps. I've searched the internet and haven't found the way to print the content of the windows. Tried using windows.print(), but nothing happened.
As far as I have read, the print() wont work since it is called in the background.html that does not have any content. How can I make the call at the correct place and send the content of the app to the printer?
Thank you in advance!
You're right that this can't be done through the Background page, since it is not rendered. What you'll need to do is inject a "content script" into the page you would like to print. The content script would contain the print command, and probably whatever would trigger the print command.
In a nutshell, "content scripts" are scripts that are injected into the pages a user browses. You can inject pretty much any JavaScript you like, and even inject entire JavaScript libraries like JQuery. More details can be found here:
https://developer.chrome.com/extensions/content_scripts.html
If you decide to use a popup window to trigger the print you can pass a message to the window you would like to print. Message passing is how the different components of an extension (background page, content script, popup) communicate. More info can be found here:
http://developer.chrome.com/extensions/messaging.html
Printing in apps is not yet supported, I believe. See
Issue 131279: async version of window.print()
For example, I have an ajax request and it returns <script src='buggy.js'></script>.
Problem is, it doesn't show up in sources or resources panel. That means I can't do all the cool stuffs like adding breakpoint and inspecting the elements as they run.
I could only see the source of the js file under the Network panel.
Is there anyway to make chrome add them to the sources panel?
Or how do you guys go about debugging dynamically added scripts?
Using Canary.
I was having the same problem, and I found a workaround that is better than the deliberate exception. It does still require changing the code as opposed to just setting a breakpoint inside the chrome dev tools.
I tried using the "//# sourceURL=dynamicScript.js" that was suggested as a workaround by the OP, but it still wasn't showing up for me unless it already existed in my tabs from a previous time when it produced an exception.
Coding a "debugger;" line forced it to break at that location. Then once it was in my tabs in the Sources panel, I could set breakpoints like normal and remove the "debugger;" line.
Please refer to https://developer.chrome.com/devtools/docs/javascript-debugging#breakpoints-dynamic-javascript
(Original link is broken-- archived link below)
http://web.archive.org/web/20141016164821/https://developer.chrome.com/devtools/docs/javascript-debugging#breakpoints-dynamic-javascript ("Breakpoints in Dynamic JavaScript").
I am injecting a partial into a page using $().html(content). Part of the partial is JavaScript code in an inline script block I need to inspect. When I look in the Sources tab in the Chrome Developer Tools it doesn't show the injected content. All it shows is the original source.
Is there a way to gain access to the JavaScript?
Update
I am using Google Chrome 21.0.1180.77 but I also have Google Chrome Canary installed.
I don't have a Sources tab (Elements, Resources, Network, Scripts, Timeline, Profiles, Audits, Console).
The Elements tab always reflects the current state of the DOM, so it will show any injected scripts. EDIT: This appears to be wrong.
There's a Chrome issue about this: http://code.google.com/p/chromium/issues/detail?id=95352
You can add a specially formed comment to the injected JavaScript code, and it will then show up in the Scripts tab (but it still doesn't show up in the Elements tab, for whatever reason):
//# sourceUrl=whatever.js
How to see injected snippets:
In order for injected code to be visible, you will need to add a sourceURL comment to the top of the evaluated script, like one of the following:
//# sourceURL=//domain/file.js
//# sourceURL=http://domain/file.js
//# sourceURL=https://domain/file.js
//# sourceURL=//domain/file
Note, that without the // hinting at the protocol and some domain immediately following, then the injected snippet will not show up under sources by default.
How to see injected snippets without a protocol and domain:
Continuing, with just a file name, like so:
//# sourceURL=file.js
You will have to change the source settings by unchecking Group by folder. See image.
At fbrell.com I want to test some code and to see code of theirs existing examples. But, in none of the following browser IE8, FF3, Chrome I can't write anything in the text area. When I go to Save Code of an existing example there is for a second shown code of that example and after that it dissapears. Same thing happens at my home and my work PC.
Googling about this problem wasn't successful.
How to do it?
FBrell console is implemented in Facebook, JavaScript Test Console try it if it didn't work, try clearing the cache.