Javascript Unix time to UTC string in Chrome console

Problem:

In the Chrome Dev Tools console, I'd like to view a Unix Time numerical value/timestamp as a human-readable UTC date/time string.

Solution:

In the Chrome Dev Tools console (and in general), one way to view a Unix (POSIX/Epoch) Time as a human-readable UTC string is to use Javascript Date.

For example, if the number of seconds since Epoch is 1480528272, we can convert this in the console by:

new Date(1480528272*1000).toUTCString()

Note that we need to convert the number of seconds to milliseconds since Epoch by multiplying by 1000.

Notes:

Note that due to the size of a Javascript integer, overflow may occur if the desired timestamp is larger than Number.MAX_SAFE_INTEGER.

A Javascript Date object also has a valid range that must be adhered to. More information can be found in here.

References:

• http://www.w3schools.com/jsref/jsref_obj_date.asp
• https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date
• https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER

View GWT emulated Long in browser developer tools

Problem:

I would like to see the long value of a GWT emulated Long in my browser's developer tools.

I already know how to pause and debug my web app, but when I inspect a Long value, it looks similar to {h:0, m:544, l:54210}.

Solution:

Imagine that we have an emulated Long value: myLongVal={h:1, m:234, l:567}

To translate this to a human-readable Long (in most, but not all cases), type the following in the developer tools console:

myLongVal.h*Math.pow(2,44) + myLongVal.m*Math.pow(2,22) + myLongVal.l

(See screenshot)

Notes:

This was verified to work in GWT 2.7. Your mileage may vary for other versions.

The above method should work for Long values that are low enough. However, overflow may occur for larger emulated Long values as the cast to a Javascript double does not cover as many bits as a long integer.

Note that if you have a browser that actually supports 64-bit integers or larger, you might be able to use the following:

(myLongVal.h << 44) + (myLongVal.m << 22) + myLongVal.l

References:

• https://github.com/gwtproject/gwt/blob/master/dev/core/super/com/google/gwt/lang/BigLongLibBase.java

Chrome CPU throttling

Problem:

I would like to slow down, or throttle Chrome to test my web app's responsiveness. My computer is too fast to represent devices in the real world.

Solution:

Enable CPU throttling in Chrome Developer Tools:

• F12 to open developer tools in Chrome
• click on the "Timeline" tab
• click the CPU throttling drop-down (beside the trash can/garbage collect icon) (see image below)
• select your desired throttle speed

Notes:

This was verified to work in Chrome version 54. Your mileage my vary with different versions and on different machines.

Also note that while this may help simulate and uncover some performance issues for scripts during development, it may not completely simulate issues experienced on slower devices. Using a virtual machine, or a real test machine would generally be preferred for more comprehensive testing.

Nonetheless, a big "thank you" to the Chrome developers for including such a useful feature :)

References:

• https://plus.google.com/+AddyOsmani/posts/NRsAqshb17n

Copy local scope variables in Chrome developer tools

Problem:

I would like to use Chrome developer tools to access local scoped variables when debugging Javascript applications.

I am already familiar with debugging with using developer tools, including setting breakpoints and pausing code execution.

How to reminder:

• set break point to pause execution within the desired scope
• to access the local scope variable, type it in the console while script execution is still paused in the desired scope (see image below)

Notes:

This was verified to work in Chrome version 54. Your mileage may vary using other versions.

Export open tabs in Chrome without a plugin (in order to share them with someone)

Problem:

How can I export open Chrome/Chromium tabs in order to share them? I have a bunch of tabs that a friend has opened in Chrome on my computer as part of some research that they were doing, and they would like to have a list of the opened tabs to continue working on their own computer.

Solution:

There are a few ways to share open tabs in Chrome. However, one of the easier ways to do this without a plugin is to simply bookmark all open tabs into a new bookmark folder, edit the saved bookmarks, export the bookmarks to a HTML file, and then share the HTML file. The file can be imported back into Chrome on another computer.

• To bookmark all opened tabs, select in the main menu: Bookmarks -> Bookmark All Tabs
• To edit the bookmarks: In the Bookmark Manager, create a new folder for the tabs and then edit out the ones you don't want to share
• To export (while in the bookmark manager): 1) select a folder, 2) do one of the following (depending on your version of Chrome):
• • Click 'organize' (top of the right-hand side of the manager) -> Export Bookmarks to HTML file, or
  • Click the gear button -> Export Bookmarks

Importing these bookmarks in Chrome follows a similar process:

• (main menu) -> Bookmarks -> Bookmark Manager
• Organize -> Import Bookmarks from HTML File

References:

• https://support.google.com/chrome/answer/96816#alternate (importing and exporting bookmarks)