Is there a way to debug (set breakpoints, follow code step-by-step etc.) JavaScript code that was dynamically added via AJAX? I can't find it, seems like it only allows to review inline JS (main page source) and in external .js files.
It's currently not possible to debug dynamically evaluated scripts, because the Firefox debugger APIs Firebug is based on don't give access to them yet.
Though there's already a bug report at Mozilla asking for these APIs.
There's also a simple test case for eval()ed scripts on Jan 'Honza' Odvarko's website.
Edit:
Debugging dynamically evaluated scripts is possible. The only thing you have to take care of is that you choose the right evaluated script. E.g. when you click the "Eval!" button of the test case twice, you'll see two evaluated scripts inside the Script Location Menu, but just the latter is debuggable.
Sebastian
Related
I would like to run some userscripts to backup data.
The same scripts could be used on a variety of websites.
Scripts are basically the same, only some configuration changes from one script to another (what to scrape on the page, and where to save it).
Scripts will not alter the page in any way, just read it then call some REST API with the data
I do not want these scripts to be loaded on every web page, as they won't alter them, and depending on the page there is only one I'd like to run anyway.
So is there a way to launch these scripts directly from the browser (Firefox) ? From a bookmark or something ? Basically I want to click a button and have the script run like if I was running it from the js console.
Best I found for now is the "#run-at context-menu" directive of Tampermonkey. My script appears in a TamperMonkey context menu and is run on click.
However this menu is loaded on every page (#run-at context-menu ignores the #include directive and is applied everywhere), I'm not sure of the performance consequences, and it might be inconvenient if I end up with lots of scripts.
I guess I could also modify my scripts to be run on specific pages so that they add a floating button or something. But I'd rather not modify the pages, and it would be inconvenient on pages where I'd like to have several possible scripts.
I remember using a Greasemonkey script that added options on the context menu a long while ago. Would that be possible with Tampermonkey, implementing an equivalent of the #run-at context-menu myself that would only work on some pages ?
A more native way would be best, but I'm open to options.
Basically I want to click a button and have the script run like if I was running it from the js console.
From above, I assume the userscript does not use any GM API or use #require since those are not available in JS console.
If that is the case, FireMonkey has a feature to inject script (or CSS) from the toolbar popup.
After saving a script and disabling it (so it doesn't run automatically) or enabling on sites that the script MUST run, users can select the script in the toolbar icon popup and click the button to inject the script in the active tab.
For temporary scripts, FireMonkey also has a Scratchpad that you can paste JS (or CSS) into and run on any webpage by clicking the button. FireMonkey remembers the last pasted data so that it can be reused.
Note: Except TM that alters the CSP of websites, other managers are bound by the webpage CSP.
Turns out there's a function for that: https://wiki.greasespot.net/GM.registerMenuCommand
Your script just needs to declare a function, call GM.registerMenuCommand("label", your_function), and it becomes available on click in the GM/TM menu.
Contrary to the other answer this means you can use #require.
Contrary to the #run-at context-menu this means you can use #match to only apply it to the intended websites
Notes:
GM_registerMenuCommand in TamperMonkey
Needs the #grant to use the function
If content scripts are specified in manifest.json for Firefox, Firefox will also load content scripts for already opened tabs and execute them even the tabs are already in loaded and ready state.
Google Chrome does not add any content script when extension is installed for already opened tabs. The content script is loaded when the page is refreshed for the older tabs.
I want to ask is Firefox's behavior is expected or bug?
As far as compatibility goes, it's a bug.
Chrome does not do that.
As a result, many extensions implement custom logic to achieve the effect.
One has to take into account side effects. Suppose your content script injects some UI into the page. Then the extension is updated. That amounts to extension restart, and suddenly you have 2 copies of the UI. Also valid if you just attach event listeners, as (at least in case of Chrome) the old content script's context continues to exist (in an "orphaned" state).
The last point is very important and probably the reason why Chrome doesn't do it by default. At some point I made a very long post about this problem - if you're going to report this as a bug to Mozilla, please include that. There's also this feature request that is related.
What would be sensible (and backwards compatible) is to add a parameter to content script description in the manifest - whether to inject into existing pages. It will be up to developers to guarantee that side effects are taken care of. This usually requires even more code to just communicate to the old script that it needs to wind down and clean up.
We're having a very peculiar problem with a site that is using mod-pagespeed. Here's the link in question -
http://www.microsemi.com/applications/
If you try to expand one of the sections by clicking on the '+' sign you need to click twice to open.
However if you disable pagespeed using http://www.microsemi.com/applications/?ModPagespeed=off
The link works correctly.
What is the best way to debug this ? Is is possible to selectively disable javascripts from being processed by mod-pagespeed ?
I'd start first of all with looking at the errors that are thrown up on the page in chrome console:
Uncaught ReferenceError: Tips is not defined www.microsemi.com:43
Failed to load resource http://www.microsemi.com/media/system/js/mootools-more.js.pagespeed.ce.BqakF5Rbjl.js
These are presumably related as the errors vanish on the second link without page-speed. I'd assume the second one must be the reason why two clicks is needed - for some reason there is a javascript file missing using mod_pagespeed - also presumably containing jQuery UI.
I should probably add that it says here mod-pagespeed only seems to be of use for badly written sites. Joomla is well written so as long as you have well functioning extensions there should be negligible difference on your site!
I'm to make a firefox extension which will inject some js code as well as whole jQuery lib.
I want it to happen (the injection) when user pushes the button placed somewhere in the browser. I have read docs form MDC and other tutorials about making the extensions and they seem complicated to me. Technologies such as XPCOM or XUL are completely useles form me (I have no time to learn them in fact). My question is, is it another way of solving my problem then following MDC? I need to find quicker way of doing my task.
I've already written the extension for Google Chrome, and it was a way simplier than doing it for Firefox.
I would take a look at Greasemonkey. It shares some similarity with Chrome plugins in function (Script gets injected on the page, local storage, etc). As for using JQuery with Greasemonkey, look at this question: How can I use jQuery in Greasemonkey?
You can use a bookmarklet to add jQuery to a page and/or inject any other code.
Is it possible through a plugin or setting or something to allow Firefox to recognize the live DOM source code?
Basically, firebug or other similar tools can recognize elements on the page which Firefox does not.
I understand with these extensions I have the ability to see such changes made by javascript, but Firefox does not seem to fully recognize them.
I'll try to clarify.
If I load a page and view source (ctrl-U), I see what the server sent to Firefox, and what Firefox ostensibly recognizes as the source code of the page. If in that source code, there is javascript which alters the DOM, and then I hit (ctrl-U) again, the code is not updated.
I am using a testing tool (iMacros firefox plugin) to automate functionality, but it does not recognize the updated DOM because Firefox does not. Firebug and similar tools can recognize these "live" updates. Does that help?
http://www.chapter31.com/2006/12/04/viewing-ajax-generated-source-code/
You can try using the web-developer extension with a view-generated-source option.
I'm still not sure I understand your question, but I think what you're getting at is the Web Developer extension for FireFox, specifically its "View Generated Source" feature.
That will let you see the altered DOM.
Firebug gives u this ability:
for instance check the HTML tab when running a jquery ticker and see the dynamic changes live in the DOM
Usually, when I have weird issues with either the console or the DOM inspector with firebug, I find restarting the browser and validating your code is the way forward.
That said, I'm not really following your question, the document that firebug shows is the same one in the firefox window...?
It looks like the problem is not that you want firefox to show the current DOM when you hit CTRL+U, but that you want some automated testing tool to be able to test your web pages.
Perhaps you should use a testing tool that is suited to the job of testing rich web applications, Selenium, for example, can do this.