Chrome console clear assignment and variables

Question

I am learning JavaScript and have been doing a lot of testing in the Chrome console. Even if I clear the console, or use any of the commands I've seen in other threads (localStorage.clear()) any variables I've assigned still show up.

For example, if I do something like var name = "Bob";

I clear and close the console, reopen it, and look for the value of name, it's still Bob.

What's the best way to clear these out?

clearing, closing and opening console will not reinitalize page context. you have to refresh page — madox2, Dec 14 '15 at 15:34
["`clear()` : Clears the console output area."](https://developer.mozilla.org/en-US/docs/Tools/Web_Console/The_command_line_interpreter) — epascarello, Dec 14 '15 at 15:36
Just hit F5 to refresh the page. [And don't use a global `name` variable](https://stackoverflow.com/q/10523701/1048572). — Bergi, Jun 06 '17 at 11:38
This is freaking me out. I swear that refreshing the page - and especially hard refresh would clear the global scope. Did something change? I checked with about:blank and also a few other web pages. OK.. so - ...time to answer instead. — sheriffderek, Aug 08 '21 at 02:51
[Clearing is no longer necessary](https://stackoverflow.com/a/68355614/1048572), Chrome 80/92 allows redeclarations of lexically scoped variables. — Bergi, Sep 04 '21 at 12:29
Hit F5 or Ctrl+Shif+R to clear the console before running any scripts using Ctrl+enter. This works for any JavaScript sources. Use any globals or version of the language. — Chuck, Jan 06 '23 at 15:56

pjivers · Answer 1 · 2018-01-22T05:35:30.497

56

A simple solution to this problem is to wrap any code that you don't want in the global scope in an immediately-invoked function expression (IIFE). All the variables assigned in the function's scope are deallocated when the function ends:

(function() {

    // Put your code here...

})();

For more info on IIFEs: https://en.wikipedia.org/wiki/Immediately-invoked_function_expression

[Update]

In ES6 you can use blocks (so long as you use let instead of var):

{

    // Put your code here...

}

For more info on blocks: http://exploringjs.com/es6/ch_core-features.html#sec_from-iifes-to-blocks

edited Jan 22 '18 at 05:35

answered Feb 15 '17 at 00:51

pjivers

1,769
18
27

8

I vote your answer up, because despite it does not answer the question, it's a cool solution :) – Timbergus Mar 26 '19 at 11:20
You shouldn't code JavaScript any differently because you're using Chrome Dev Tools. You just have to know how to run it appropriately. – Chuck Jan 06 '23 at 16:06

sdgluck · Accepted Answer · 2021-01-14T10:08:20.853

47

Easiest way to clear data from the console is to refresh the page.

What you are affecting when declaring any variables or functions within the developer console is the global execution context, which for web browsers is window.

When you clear() the console you are telling Chrome to remove all visible history of these operations, not clear the objects that you have attached to window.

edited Jan 14 '21 at 10:08

answered Dec 14 '15 at 15:37

sdgluck

24,894
8
75
90

4

reloading the page doesn't clear it out for me. delete name; works though. I'd rather just have a way to clear the deck completely without having to delete individual assignments. I'm not sure why refreshing doesn't work. That seems to be a popular answer. – spex5 Dec 14 '15 at 15:42
You're right that refreshing doesn't work - I'd never noticed that behaviour before. You could attach all data to an object, e.g. `data = {}; data.name = 'Bob';`. At least then you only have to do `delete data;`. – sdgluck Dec 14 '15 at 15:47
Chrome's console seems to be very inconsistent. If I am using an about:blank page to refresh, it seems to clear out the variables.. but sometimes not. What always seems to work is closing and re-opening the browser. Oh well. Good enough for now. – spex5 Dec 14 '15 at 16:06
6

var, let and const create non-configurable properties that cannot be deleted with the delete operator. The JavaScript delete operator removes a property from an object; if no more references to the same property are held, it is eventually released automatically. – Vlad Bezden Apr 07 '18 at 08:56
2

Refreshing the page now clears all variable assignments. – Shandy Sulen Sep 12 '19 at 15:12

score 22 · Answer 3 · answered Dec 14 '15 at 15:35

22

Clearing the console doesn't clear out the variables from the memory rather it just clears the data from the user interface.

Reloading the page clears the console data. I hope that should be fine as you mentioned that you are just testing and learning javascript.

Hope that helps!

answered Dec 14 '15 at 15:35

hkasera

2,118
3
23
32

This is probably the best answer, without having to delete each variable one by one. – carkod Oct 29 '19 at 13:48
"Reloading the page clears the console data." I can't find the document mentioned this behavior. How did you know that ? – Qiulang Jun 10 '20 at 10:27

score 15 · Answer 4 · edited Jan 13 '21 at 16:09

Just Reload for new context with clear history and old commands execution

Things have changed a lot on Chrome dev tools. delete name does not help;

//for example if you have declared a variable 
const x = 2;
//Now sometime later you want to use the same variable 
const x = 5; // you will get an error 
//if you try to delete it you will get false
delete x;

But a reload of page while console is still open. will refresh the console context and now the x is not available and you can redefine it.

score 2 · Answer 5 · answered Aug 17 '20 at 00:55

2

There is actually an answer to this, not sure if this is new or has been here for a while but if you perform a hard refresh i.e. control + shift + r then the console values are completely removed and you can re-instantiate the same variables and functions, etc.

answered Aug 17 '20 at 00:55

Rami

490
7
22

1

This would be correct - for any variables not already initialized. – sheriffderek Aug 08 '21 at 03:07

score 2 · Answer 6 · edited Aug 27 '20 at 06:59

2

If you right-click the refresh icon in chrome(chrome devtools need to be opened, F12/Right Click on the page -> Inspect), after a second or two you will get the option to hard reload. Hard Reload will clear all stored variables.

Ctrl+Shift+R (Windows) / Cmd+Shift+R (Mac) will do the same without opening the devtools.

edited Aug 27 '20 at 06:59

Jan Schultke

17,446
6
47
96

answered Aug 26 '20 at 20:25

Pmmg

21
1

score 1 · Answer 7 · answered Dec 14 '15 at 15:38

1

If you want to remove that variable then

delete name;

answered Dec 14 '15 at 15:38

user2879041

1,077
1
12
25

1

copied from Vlad's comment above --> var, let and const create non-configurable properties that cannot be deleted with the delete operator. The JavaScript delete operator removes a property from an object; if no more references to the same property are held, it is eventually released automatically. – Akshay Vijay Jain Feb 16 '19 at 07:45

score 1 · Answer 8 · answered Jan 23 '20 at 12:15

1

I think the best way to clear the defined varible would be:

window.location.reload();

It would automatically remove all the declared variable at once.

answered Jan 23 '20 at 12:15

Pawan lakhera

187
14

You don't need to write any special code to run JavaScript on the browser console. You just need to understand how to use the Dev Tools provided. – Chuck Jan 06 '23 at 16:12

score 0 · Answer 9 · answered Aug 08 '21 at 02:58

name is already defined.

So - it's already in the global space.

If you do the same thing with a variable like hello - and then refresh, it will clear the memory.

Because name is already defined, it will remain. Refreshing - will not work.

(this was really confusing me - but would not have - if I had chosen almost any other variable for my class demonstration!)

score -1 · Answer 10 · answered Jun 18 '21 at 07:50

-1

It seems the console history can be cleared through right mouse button context menu.

answered Jun 18 '21 at 07:50

Anon

1

score -1 · Answer 11 · edited May 12 '22 at 06:25

-1

Up until a few days ago CTRL + Shift + R worked for me.

However they have made it very easy to clear console.

Open chrome dev tools and right-click on an empty space. If you right-click on the line with the cursor, it won't show you the right options. The right options are clear console and clear console history.

Clearing console history will clear all variables and their data stored in the console. Hope this helps. It was driving me nuts too and there was no clear answer.

edited May 12 '22 at 06:25

Jakub Kurdziel

3,216
2
12
22

answered May 06 '22 at 14:46

Isatu K

1
2

A full refresh and clearing the console are not the same thing. – Chuck Jan 06 '23 at 16:03

score -7 · Answer 12 · edited Jun 26 '19 at 05:29

-7

Console.clear()

Use this command in your browser console and see the magic, very handy to use and works perfectly as per best practices of using chrome console,

edited Jun 26 '19 at 05:29

Cray

2,774
7
22
32

answered Jun 26 '19 at 04:46

M Ali Imtiaz

145
2
5

Could you add a reference for what this code does? Link to documentation etc. – Cray Jun 26 '19 at 05:18
@Cray one of our fellow has provided great clarification in regards, [link](https://stackoverflow.com/questions/3011600/clear-javascript-console-in-google-chrome) – M Ali Imtiaz Jun 26 '19 at 05:29
There is no Console object in chrome. There is a `console.clear()` on Firefox, but that's just for clearing visible history as mentioned above. – carkod Oct 29 '19 at 13:46

Chrome console clear assignment and variables

12 Answers12

Just Reload for new context with clear history and old commands execution

Linked

Related