Collapsable/expandable browser-style console for node.js? - javascript

When I log an object in a browser console, I can expand/collapse keys which have 'large' (to display) values, eg, a key whose value is another object.
I'd like to be able to do the same for node. Eg, say I:
console.log(request)
...in an express app. Express 'request' items are large, and will easily scroll right off the screen. Being able to expand/collapse larger items would be super useful.
Is there an collapsing/expanding console for node.js?

I've used interactive console apps (top, etc), and for me a REPL falls into that category. ;)
Here is a much improved REPL: https://github.com/Benvie/Node.js-Ultra-REPL
I don't think it allows you to collapse parts of an object, but this is in the works:
GUI-like interface with collapsable object views
It does provide Toggling hiddens and builtins at least.

node-inspector might be useful to you; it's not exactly what you seem to want, but it's capable of providing the information you're looking for.

Maybe you can log the object in the browser side console in which you can check property easily. bonsole, a simple way to log something in browser. Even in Linux, you can go to the LAN's ip to check it.

Related

console.log to a custom category

I have a requirement to display all the logs with a tag (say TelemetryLogs) to a group, so that I can see all the network calls flow in a single view.
The requirement is to see the Network Calls in a grouped view - say a table with key-name , key-type and log-object.
The immediate suggestion that we gave to business is that we would log to console with a prefix and allow them to filter using a filter-expression.
Eg: console.log(``Telemetry %s %s %o``, "name", "type", { someobject: 'someval' })
But they want the group to appear as a sub-group under one-of the categories in chrome (pic below). Apparently, they plan to roll out similar groups and dont want to remember a list of expression, to filter out what they want.
I then realized stackoverflow is the right place to check if this is possible, if not possible, what other grouped display options would help us achieve a similar expectation.
Note: Background of the use-case is that during our pair-programming, sometimes we end up business analyst sitting next to us. One of them realized if they had a consolidated-running-view of the telemetry data during development, it would help him/her catch early issues...
there is no way to create sub groups in the console current API standard that appear in the developer tools panel - there are group related functions that can group multiple log statements under one statement but thats not what you want, anyway here are two options that came to my mind
structure you log messages in a way that they can be easily filtered using the built in filter for logs maybe something of the following nature (groupId - logType - message) (Anyway it is always better to have a structure for logs)
The developer tools are part of the page, and they can have custom extended functionalities, you can create an extension that adds subgroups to that panel, along with the functionality you need, or you can add a tab of your own to filter that logs (its easier that what it looks)
Anyway one important thing to note, is that if logs are important to you then they should be sent to an external service that ensures no data is lost, and enables advanced load and extract functionalities on the logs. And anyway logs on the client side in the console are only useful for development, so is it worth it ?

how to access the element by the value stored in variable in javascript

Basically i have an html collection coming up with:
document.getElementsByName('the name')
It consists of a select which has options and i want to get the length of the value which works in internet explorer as well as edge browser so i thought of getting it by:
document.getElementsByName('the name').thename.options.length
I am getting the value in the console part of my browser but while writing the code and running it is not able to access the thename due to some rules I don't know
so is there any way i can get the access of the .thename. inside the document.getElementsByName('the name').thename.options.length
I hope I am clear with my question as this is an ongoing project and I can hardly make other changes
thename is not a built-in object to the HTML select element, so you must look for the correct syntax.
I'm assuming you're looking for something like this:
To find the nth option, you would do: document.getElementsByName('the name')[n-1](as this is zero-indexed).
Then you can proceed with the .value and .length methods.
document.getElementsByName('the name')[n-1].value.length
In addition, since this is a syntax error, you may look to online resources first before consulting StackOverflow, as this is general knowledge. Trying to make up syntax or thinking something may be right is also a no-no. Computers are stubborn, and we must be too with them.
More info: https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement

How can I make console.group output to debug or info instead of log?

I try to keep console.log clean so I use console.debug and console.info when possible but how can I make it so that console.group logs to info or debug. It keeps putting an empty group in log. I don't see any option to change it to output somewhere else.
As best I can tell, it's not specifically meant to work that way according to the specification (which is more concerned with interactivity and is light on other details):
https://console.spec.whatwg.org/#grouping
In practice, a group can contain different types of output (so for instance, info and debug) so I think the intention here is to make groups useful to specific actions (so group all this console output for this function) so having a group header that is always visible makes some sense. Not sure if that is helpful.

Finding the location of defined JavaScript using Firebug or alternative tool

I am attempting to locate where a particular class/function/object is defined on a site with many javascripts being rendered. Manually sifting through the scripts has proven to be very time consuming in the 'Scripts' panel of Firebug.
Before I continue going that route, is there an easier way using modern front-end development tools to locate where certain things are defined? Would be great if I had some kind of ctags type functionality that vim provides, but any other approach would be great.
Chrome has Find in all Sources:
CTRL-SHIFT-F on Windows and CMD-OPT-F on Mac.
Edit:
You can also use CMD-SHIFT-O (mac) CTRL-SHIFT-O (windows/linux) in chrome to find functions by name.
AFAIK none of the standard dev tools (Chrome Debugger, Firebug, etc.) offer this functionality. You can sort of get it by typing the object's name in the Chrome debugger, but that will just show you something like "Backbone.View.extend.extend.constructor". In other words, it shows you the root-most constructor, which is fine if all your classes are exactly one level deep. If not though, for instance if A is a subclass of B and B is a subclass of C, knowing that your object "a" comes from C doesn't really help much.
Furthermore, even if it is what you want, Chrome won't tell you where to find the constructor, just its name. Personally I solve this by giving all my objects a _type property (or attribute, for the ones that are Backbone models). This way I can simply type myObject._type (or myObject.get('_type') for the models) and know what kind of object I have. And since I give every object type a unique name, all it takes to find the cunstructor is grep for that name.

Getting all info on a Javascript variable

I'm not a JavaScript Wizard by a long shot. But I am a web-developer and so I need to know my way around it at least a bit.
Something I'll often do is simply alert a variable to see what it is.
However, the problem is that I'll often get a result like: "object HTMLInputElement". To me this means little to nothing. Sure I can look it up, but I need to alert children() of children() of children(), etc...
I've tried walking through the JavaScript with Firebug, but for some reason this is very slow. Firefox hangs when I start a debug session, for every single debug session and I don't know why.
So, I want to inform if there is a way to get detailed info on variables some other way. Or a system I can use to work with to make things easier.
I find the developer tools in Chrome work quite well, giving a good amount of detail on demand (usually just hovering the mouse over the variable in the script tab; if that variable is a structured object, a little tree control appears and you can drill down). But then, I don't have your Firebug issue either (or at least, not often anymore).
Debugging with alert is very time-wasteful and, as you've found, frustrating; if at all possible I'd look at using a real debugger (like Chrome's Dev Tools; I've also heard good things about Opera's).
This should help:
http://www.openjs.com/scripts/others/dump_function_php_print_r.php
The easiest way to inspect a javascript variable is with a debugger. If Firebug is not working out for you try using Google Chrome, it has an inspector built in.
Btw - not sure what you mean by "start a debug session". If you have firebug installed, you should simply be able to click on the firebug icon on the bottom right of your browser. Go to the script tab, and select from the drop down whatever js file you want, stick in a break point (just left-click on the margin) and refresh the page. I've never had a problem with Firebug, it's always worked extremely well. I strongly advise figuring out whatever your issue with it is, it will make your life a million times easier.
Using any of the browser dev tools, including IE9, you can use console.log to get the variable output on the console. What information this gives you will vary by browser, but with Firebug it allows you to explore the variable in the DOM inspector tab, with full access to all properties and functions (you can even copy the content of a function to paste elsewhere).
For instance:
var foo = {};
// Do lots of stuff with foo
if (typeof(console) !== "undefined" && console.log) { // prevent errors when console not open, ideally all console calls should be removed before going into production
console.log(foo);
}
This has the advantage that it doesn't require any break points, so no slow step-debugging. It won't solve everything though, you'll often still need the debugger.

Categories

Resources