I'm developing a firefox add-on, and I'd like to log objects to console.log. Is there a way to expand the object description beyond the monotonic [object Object]? I mean if I have something like {hello: "world"} I'd like it's fields and values to be displayed like in node.js' console? Without actually implementing a loop iterating over the values.
Sometimes just a simply JSON.stringify(object) will work. I use that quite a bit.
If you're using Firefox nightly, you can do this:
set 'extensions.sdk.console.logLevel' in about:config to 'all'
use console.dir and look in the relatively new browser console:
https://www.evernote.com/shard/s1/sh/a6cb2922-a21d-431a-bc58-1800d4895ca1/d1f39b0af0b69f20c8d14e7cbb6e0d85
console.dir prints a nice expandable tree in the browser console.
Use ctrl+shift+j for console (but new firebug i think do it now too)
Remember console.log didnt work at SDK 1.14! See Official blog.
Use console.error
Related
Is there a way to save the output shown in the linked video (on the left side) to a pdf file or similar? I have started experimenting with other Reporters offered, but the format of them does not seem to be as clear for reporting. Suggestions for Reporters that could do something similar as opposed to only XML would also be useful.
I haven't used this yet, but it's on my to-do list. It promises to do just that, store the command log output to a json file. It's written by Gleb, one of the cypress people, so it should integrate and work well with cypress.
https://github.com/bahmutov/cypress-failed-log
You may export a screenshot with both, the left sidebar and the application preview by using the screenshot function with capture: runner:
cy.visit(`http://www.fabiobiondi.dev`);
cy.viewport('iphone-6' )
cy.screenshot('imageName', { capture: 'runner'})
Result:
https://i.stack.imgur.com/rqN0E.png
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.
My userscript prints some information using console.log().
This works fine in Chrome, but when I install this userscript in Firefox (Greasemonkey), the web console in Firefox is not displaying anything.
I searched for a solution and some suggested to use unsafeWindow but it is also not showing any output. Moreover unsafeWindow cannot be used for chrome. I even installed Firebug but it was no use. How can I resolve this?
For example, I tried this userscript in Firefox:
// ==UserScript==
// #name console
// ==UserScript==
console.log("hello");
You mean it doesn't work when installed via Greasemonkey, right?
Not long ago, Greasemonkey broke console.log (New! Bug report). Now, to see the results of a plain console.log() call from a Greasemonkey, you need to look in Firefox's Error console, not Firebug's.
You can see FF's Error console by pressing: CtrlShiftJ.
However, you can use unsafeWindow.console.log() in both Chrome and Greasemonkey scripts. Chrome now has limited support for unsafeWindow.
If you use unsafeWindow, you have access to the full range of Firebug's logging functions from Greasemonkey. (Firebug must be installed and they still might not work in Chrome userscripts; I haven't tested that way in a while.)
In Firefox, if Firebug is not installed, or it is not active for the page, then unsafeWindow.console.log() calls will display to the New "Web Console" (CtrlShiftK).
You need to use the unsafeWindow when inside a Greasemonkey script.
Note that Firefox currently supports console.log(), console.info(), console.warn(), and console.error() natively -- no Firebug required.
Wait a minute: if the question is about logging in the console with Greasemonkey (I could swear I saw the tag greasemonkey), why not use the GM_log method?
// ==UserScript==
// #name GM_log Example
// #namespace http://www.example.com/
// ==/UserScript==
GM_log("This is an example of GM_log");
Or am I missing something?
PS: you can also check for javascript.options.showInConsole in about:config. it should be true.
I found that (testing with Chrome/Tampermonkey) you need:
window.log("<message goes here>");, not unsafeWindow.console.log("<msg>");,
as unsafeWindow and console come up as undefined.
Try that, as I'm pretty sure that's the way you're supposed to do it in later versions of browsers, etc.
I'm using FF 3.6 and FireBug 1.5.0
my console.log statements are no longer appearing in my firebug console. is anyone else experiencing this? is there a setting somewhere that got switched that I don't know about?
This can happen if the javascript you are debugging tries to write something to the console variable. As an example, I stuck the following code into a random javascript file:
console = {};
console.log('asdfasdf');
After trying to set console to an empty object, console.log didn't do anything.
To fix this, you should only need to figure out where your script is trying to change the console variable, and then refresh the page.
I'm writing an extension for Firefox, and I need to log some data to Firebug's console. Within the scope of my addon, "console" is undefined, and "window.content.console" is also undefined. So how do I log to the console?
Since you're not writing Javascript that executes within a window, console is not defined.
So you need to reference the Firebug extension first:
Firebug.Console.log(str);
To log to the console from inside a firefox extension’s javascript:
Application.console.log("Hello from my Firefox Extension!");
As far as I know you can only do that if you are creating a JetPack Add-on. Normal debugging is done with Venkman from Mozilla at http://www.mozilla.org/projects/venkman/
Firebug console is associated with a particular page, so it wouldn't be very convenient even if you managed to log messages there. Did you try Chromebug? I didn't use it, but I would expect to find a similar console for extensions to use there.
You could also use the regular Error Console, although you won't get all the niceties Firebug's console provides. You could install Console^2 https://addons.mozilla.org/en-US/firefox/addon/1815 to make using the Error Console a little less painful.
If in your extension you have access to the content Window object, you can unwrap it, and call the console methods directly:
window.wrappedJSObject.console.log('something important');
There are contexts in which even the Firebug object is unknown, like if you're trying to call it from a sidebar... in which case you have to go all the way back to the original window to get the firebug object:
var Firebug = window.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
.getInterface(Components.interfaces.nsIWebNavigation)
.QueryInterface(Components.interfaces.nsIDocShellTreeItem)
.rootTreeItem
.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
.getInterface(Components.interfaces.nsIDOMWindow).Firebug;
You can then from within your sidebar call Firebug like so:
Firebug.Console.log("foo");
This is documented here: https://developer.mozilla.org/en/Code_snippets/Sidebar