interacting with javascript through the chrome console

Question

I'm using a shopping cart api to build an ecommerce website. The creators made an sdk and then you have to make your own .js file for some other functions.

While debugging I would insert a console.log(etc..) anywhere in my .js file so that I could debug object options and etc..

But I would like to be able to use the sdk as a live tool, so instead of having to edit my .js file with new console.log() lines, I'd rather just be able to type object.color_code and have the console output that string for the object color code. At the moment though it just gives me uncaught reference error, object is not defined.

I think this is because my custom .js file has all of it's script inside a $(function() { EVERYTHING }); SO, when I try to call anything in EVERYTHING from the console it says it's undefined, but if I just used console.log inside EVERYTHING it would work. So is there a way I can get around this?

Feel free to explain why it isn't working but I'd like a way to enable this, don't tell me there isn't a way, even if I have to prefix what I want with the .js file it's coming from each time, I don't mind

sorry sure, the sdk provides a way to create a client which connects to shopify to access your products, inventory, prices and whatever. So when you make client, you can do client.fetchProduct(125871) or client.fetchAllproducts and it returns an array with all your products, and each array object has id, product_id, variant_id, weight. So in debugging I write console.log(cart.lineItem.variant_id) How could I just request that through the console, I tried client.cart.lineItem.variant_id but yeah.. — lopu, Jul 19 '16 at 05:21
My guess is that you want access to local variables (objects) inside EVERYTHING from the console... You just need to declare these variables outside (at the global scope). — Jeff Merlin, Jul 19 '16 at 05:22
You can declare anything you want access to as a global variable for testing purposes. Just don't reinstantiate it inside your function. — Robusto, Jul 19 '16 at 05:23
Use google chrome devtool with breakpoints: https://developers.google.com/web/tools/chrome-devtools/debug/breakpoints/add-breakpoints?hl=en — cstuncsik, Jul 19 '16 at 05:26

score 3 · Accepted Answer · answered Jul 19 '16 at 05:28

You were correct in that all of your variables inside the function are only being defined locally, and thus can't be accessed via the console. However, in Javascript there are at least two options for setting global variables from inside functions; If you use these to declare a variable you want to access from outside the function, it will work:

Assign a value to an undeclared variable: varname=value;
Assign the variable to the window object: window.varname=value; or window['varname']=value;

Arnauld · Answer 2 · 2016-07-19T05:41:58.787

A possible workaround is to expose the object(s) that you want to debug in the global scope:

(function() {
  var privateStuff = { foo: 'bar' };
  // make privateStuff public for debugging purposes
  window['debugObject'] = privateStuff;
})(); 

document.write(debugObject.foo);

If you want to expose several objects with rather common names that are likely to collide with existing ones, make sure to expose them within an object with an uncommon name rather than directly:

(function() {
  var x = { str: 'this is' },
      y = { str: 'a test' };

  window['debugObject'] = {
    x: x,
    y: y
  };
})(); 

document.write(debugObject.x.str + ' ' + debugObject.y.str);

Nick Cox · Answer 3 · 2016-07-25T23:35:22.550

1

If you're happy to change the source file then you could export whatever you want to access from EVERYTHING as a global.

$(function() { 
  //EVERYTHING
  ...

  window.Ireply = window.Ireply || {};
  window.Ireply.object = object;
  ...
});

console.log(Ireply.object); // some object

edited Jul 25 '16 at 23:35

answered Jul 19 '16 at 05:30

Nick Cox

6,164
2
24
30

charlietfl · Answer 4 · 2016-07-19T05:37:33.413

You can change a declaration like

$(function(){
  var cart = {};
})

To

var cart;

$(function(){
  cart = {}    
})

Or

$(function(){
  var cart = {};
  window.cart = cart;
})

But you will want to avoid polluting global namespace. You will also want to be careful about using globals inside callbacks or loops where you can run into unexpected behaviors since local variables scope is often important to be kept local

interacting with javascript through the chrome console

4 Answers4