How to Access Logged Objects in the Javascript Console
Tags: tips, debugging, javascript, chrome
Published: 2018-11-01 07:10:35

---
title: How to Access Logged Objects in the Javascript Console
published: true
tags: ["tips", "debugging", "javascript", "chrome"]
description: "Short post to see how to assign a logged object to a variable to be able to inspect its properties and call its methods"
canonical_url: https://blog.nicolasmesa.co/posts/2018/09/how-to-access-logged-objects-in-the-javascript-console/
---

Cross-posted from my personal blog [https://blog.nicolasmesa.co](https://blog.nicolasmesa.co).

In this short post, we go through the process of making a _console.logged_ Object available in Chrome’s javascript console.

## TLDR

Right-click the Object you want to inspect and click **Store as global variable**. This creates a variable with name `temp<n>` where `<n>` is a number (starts from `1`). Use the variable to access the Object.

## Explanation

### The Hack Version

Sometimes when I’m debugging, I need to access an Object and its methods from the Javascript console. To do this, I have to fire up the debugger and step into the function until I get access to the object I want, or I have to come up with a hack like the following:

```javascript
function superNestedFunction() {
    const obj = getObj();
    console.log(obj);

    // hack
    window.myObj = obj;

    // Do something interesting with obj
}
```


For this discussion, let’s say the `getMyObj()` function returns an object like this:

```javascript
function getObj() {
    return {
        prop: 'Hello World',
        fn: function() {
            console.log('Inside myObj.fn');
        }
    };
}
```


Then, from the console, I can do:

 
```javascript
superNestedFunction(); // Logs: {prop: "Hello World", fn: ƒ}
window.myObj.prop; // Logs: "Hello World"
window.myObj.fn(); // Logs: Inside myObj.fn
```


Note that this is a terrible hack! As much as I hate having a bunch of objects in my logs, I think it’s a lot worse to pollute the global namespace (especially when you forget to remove that hack). Let’s look at a better way of doing this.

### The better version

We’re going to use the same example that we had before (minus the hack). The entire code looks like this:


```javascript
function superNestedFunction() {
    const obj = getObj();
    console.log(obj); // We're still logging the object

    // Do something interesting with obj
}

function getObj() {
    return {
        prop: 'Hello World',
        fn: function() {
            console.log('Inside myObj.fn');
        }
    };
}

superNestedFunction(); // Logs: {prop: "Hello World", fn: ƒ}
```


Now right-click on the logged Object and select the **Store as global variable** option.

![Right click on the Object an select "Store as global variable"](https://blog.nicolasmesa.co/posts/2018/09/store_as_global_variable.png)

Chrome automatically creates a new global temporary variable (`temp1` in this case) and assigns it the Object that you right-clicked:

![Global variable "temp1" created by Chrome](https://blog.nicolasmesa.co/posts/2018/09/global_variable_created.png)

Now you can use `temp1` to access any field of that Object! Let’s see the whole thing in action:

{% youtube xR292-EaUZ0 %}

## Conclusion

We went through the steps to assign a logged object to a global variable and were able to access its properties and functions. Note that this is not a replacement for the debugger, it’s just a convenient way to explore an Object. Especially if the `console.log` is already there.

Happy debugging!