I am looking for a way to get javascript code before SpiderMoney (Firefox JS engine) or V8 (Chrome JS engine) evaluate the it.
I don't mean capturing the traffic and get it before the application does, but "hijacking" the javascript before it reaches the JS engine itself.
Does anyone know how to do it, or at least point me to the correct direction?
I compiled my own build of SpiderMonkey. Once I've done that I called my own function before the compile() function of the engine.
The function is not exported so it cannot be hooked (replaced during runtime), only patched.
Related
I've just started a project to learn Angular2 and Typescript+Javascript. I come from a Java background and my approach to debugging projects is usually a combination of stack traces, compile errors, and - on larger projects - lots of test cases. However, much of this doesn't seem to directly translate to the world of web-dev; particularly debugging my code that's interacting with Angular2's libraries.
Could anyone suggest any approaches that I can take to debug code working with Angular2? Specifically; how can I see what parts of my HTML/TS is causing issues? I've checked the console, from which I can see that I've broken Angular2, but it doesn't seem much more informative from that.
Just to clarify; I don't want help for this specific instance. I'd like to learn how to diagnose+fix these problems myself.
Assuming you're using Chrome, you can put breakpoints in the "sources" tab in your console. Those breakpoints can be set on the ts files. If you need informations from the js file, you can uncheck Javascript sourcemaps in the console settings: this will allow you to put breakpoints in the js files.
On a breakpoint, you can do the usual (watch, spies, stack trace, etc...). You can also write js in the console accessing local variables directly, for instance:
function b(){
var c = 1;
// if you put a breakpoint here and type c in the console, it will write "1"
}
Specifically in angular 2, you might want to add breakpoints in the "throw e" lines in their library, you'll get more detailed stack traces. If you click on the "..." in their stack traces, you'll get access to your file that caused the error.
That's for actual bugs. Now, for performance, on the "timeline" tab, you can click on the "record" button on the top left. Once you're done recording (click "finish"), you'll see CPU usage. You can zoom on events in the timeline to see which part of the code is using up too much resource.
You can also track memory by checking the "memory" checkbox.
If you need to debug an iframe, there is a select box in console saying "top frame" which you can set to whichever iframe you want.
If I've forgotten anything important, just ask :).
Open web developer console, go to "Sources" section. Press "cntrl+p". A search box will open where type ".ts" and find your file or directly search your file like "myfile.ts". Open it and you can put breakpoints directly in the code, the same way we put breakpoints in a js file and Voila, you can debug Typescript.
I think this doesn't just hold for Angular2, but given you come from a Java background I assume this is more like "how do I successfully debug JavaScript web apps" in general.
Related to this I highly suggest you to take a look at the Chrome Devtools page (given you use Chrome which has very neat devtools build-in).
On that page there are a lot of useful tutorials. Specifically in your case probably the article on Debugging JavaScript which has some cool tipps like conditional debugging, breaking on DOM modifications, even break on caught/uncaught exceptions etc.
I also often suggest people to do the free Code School course on Discover Devtools which is nice as well.
In the case of TypeScript, also make sure that you enable sourcemaps. As you probably know TypeScript isn't directly executed by the browser, but rather it is being "compiled" (or as it's called "transpiled") into JavaScript. That said, you probably don't wanna debug the transpiled JS but rather the TypeScript code you wrote. To enable sourcemaps, set the proper flag in your tsconfig.json:
{
"version": "1.6.2",
"compilerOptions": {
...
"sourceMap": true
},
"exclude": [
...
]
}
If you are coming from the Java world, there's a good chance you are already using IntelliJ IDEA from JetBrains. If so, then it is possible to debug JavaScript (and TypeScript) applications directly in the IDE using the same interface you use for Java applications.
JetBrains has some documentation on the subject that might help.
As was said in other answers, you can also use the Chrome Inspector's debugger. Personally, I greatly prefer using IntelliJ to do that instead.
If you are just looking for examples on how the workflow goes, then take a look at this Github project that shows the use of Webpack with Angular2.
I'm a newby in HTML, while I've some skill with Processing language.
I'm writing an application in Processing which I want to visualise in a local webpage.
I've a basic index.html, which upload my sketch and the file processing.js.
It works.
My problem is that sometimes, an application which runs with no proiblem using the Processing IDE, does not run in the webpage. I assume there are still some bugs in the porting from Processing to JavaScript.
What I would like to know is: is there some way to debug the webpage I try to visualise?
Just to seek "where" the webpage remains stuck! In this way I could bypass the problem!
For now, I'm using Firefox for html visualisation.
Thanks a lot, Valerio
Ops solved! I downloaded FireBug, an add-on for Firefox implementing a debugger.
Then I launched the debugger. It showed me immediately the error.
For curious people:
I declared an ArrayList called "foo_list", containing object "foo":
ArrayList<foo>foo_list
The above line does not produce any error in the Processing IDE.
However processing.js complains with it, the debugger displayng
the following message:
ReferenceError: ArrayListfoo_list" is not defined
The solution is to insert a blank space:
ArrayList<foo> foo_list;
This works! Maybe the error given to the parser
from Processing to JavaScript!
Bye!
Currently I'm trying to include Dojo from either one of these two CDN (Content Delivery Network) sources:
1) o.aolcdn.com/dojo/1.3.2/dojo/dojo.xd.js
2) ajax.googleapis.com/ajax/libs/dojo/1.3.2/dojo/dojo.xd.js
It seems like some times during the day, Firefox 3.5 refuses to load the dojo library.
I see errors in Firebug console like "dojo is not defined" when I do a "dojo.require" statement. Also from Firebug and go to the "Net" tab, and see no history of any attempt to load from the above dojo libs.
Yet, I can open the same page in IE7 and it works. I have flushed cache in FireFox, and killed and re-opened it (but I was using the restore previous pages option).
One time today, when I switched from AOL 1.3.2 to 1.1 it worked once, then never has worked again.
Thanks,
Neal
Sounds like timing issues. Are you sure you do CDN right? The trick is you cannot use what's defined in files you dojo.require()d right away — they are going to be loaded asynchronously.
The basic structure of the CDN-based application is like this:
<script src="to/dojo/cdn"></script>
<script>
dojo.require("dojo.this");
dojo.require("dojo.that");
// more dojo.require()
// you cannot use dojo.this and dojo.that here
dojo.addOnLoad(function(){
// this is crucial: do everything in dojo.addOnLoad();
// now use dojo.this and dojo.that
dojo.this(dojo.that);
});
</script>
In order to troubleshoot you can do one thing: write a minimal web page, which loads Dojo using your favorite CDN and does nothing. Open it up in Firefox, open Firebug and enter some simple Dojo calls manually to see if it works for you. If it doesn't, switch to the Net tab and see what calls were made, when, and how they ended.
I have modified some code inside my Firefox. Just add on some extra functions for my isolation network. Besides that I also want to create my own FF extension for this particular purpose. I just need some information:
Can the code inside my Firefox, call any function Javascript declared in my extension?
Generally yes, but your question is not specific enough. Both Firefox and an extension can have JS and C code, code in XPCOM components, code running in a specific window, JS modules, etc.
Assuming the "Firefox code" is running in some window (e.g. you edit browser.js) and the "extension function" you want to call also exists in that window (e.g. you overlay chrome://browser/content/browser.xul, which is the URI of the main Firefox window, in which the browser.js code runs), you can just call it as you would normally do.
I understand that jQuery is the preferred Javascript framework for Firefox extensions, but I'm comfortable with Prototype and need to implement a simple Firefox extension.
Unfortunately, I'm having trouble invoking a Prototype method. Each method call is resulting in a no-op: there are no errors or other signs the method call occurred.
Here's the overlay code:
<overlay id="liteextension-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
This call to a Prototype method returns an empty array, even though there are divs in the page:
var all_divs = $$('div');
The "prototype.js" file lives in the same dir as the XUL file.
Using libraries like prototype and jquery inside a Firefox extension is a complicated thing. The problem is that the JQuery is not loaded in the same context when loaded from XUL than when loaded from a webpage. So if you are trying to manipulate stuff in a page, a library loaded in XUL will not see the page DOM where it expects it to be. With JQuery (not sure about prototype) you can solve this by pointing to the right context.
Second, importing libraries inside an extension in a browser.xul overlay will put all functions and variables defined in the library in the global namespace, potentially conflicting with other extensions and even the Firefox code. This could cause a big mess.
There is more information in this forum post, it is about JQuery, but the same problems apply... maybe the suggested solutions could be useful for you:
http://forums.mozillazine.org/viewtopic.php?f=19&t=1460255