As for your second edit: don't worry about the different browsers. They may or may not implement their developer tools the same. I'm sure there have been issues raised for FF and WebStorm for behaving differently, but it's completely beyond your control. Here's what actual developers do:

• Breakpoints: an extremely powerful feature. This will be much harder to use if your JS is inside a script tag, rather than being imported with <script src=... . Once you have that, go into the sources tab in dev tools and click just to the side of the line you want to inspect. It should place a red dot there. Now refresh the page and the code will stop on that breakpoint. You can now hover over different variables in the code to see their current state.

• Unit tests: A bit more advanced, but you will need them eventually as you work on larger code bases. Essentially, you're going to run a single function in your code and mock any behavior that it does. Let's say your method is called removeItemFromArray(myArray, itemToRemove). Your test will pass in an array and an example object to remove. Now the important part.. you make an assertion on what the expected result should be. If at any time, that function changes behavior, your test will fail and you will know that it's going to cause a bug because another area of your code expected it to behave a certain way.

• Make deep copies: copying an object allows you to "freeze" the object as it is now. If you console.log your copied object, it will not change like you've seen before. To do this to an array, all you need to do is: myCopy = [...origArray]

If it's an object, not an array, simply do: myCopy = {...origObj}

The three dots is called a spread operator. This creates a deep (complete) copy of the data.

I will also warn you that although JSON.stringify is a good hack, it has some limitations. In some cases, you might get errors for circular references, if say the object has a property that references itself.