Showing posts with label Developer Tools. Show all posts
Showing posts with label Developer Tools. Show all posts

Wednesday, 4 January 2017

Android screenshot to computer with adb

Problem:

How do I use adb to get a screenshot from an Android device or emulator?

I'd like to target a specific device when more than one are connected to adb.

I already know how to open adb shell and put a device in debugging mode.

Solution:

One method is the following:

  1. Get list of devices:
    adb devices -l
    

    You should get a list that looks like:

  2. Once you have a device identifier, such as "emulator-5554", you can use similar commands as below. (Replace "emulator-5554" with your device identifier).
    adb -s emulator-5554 shell screencap -p /sdcard/screencap.png
    adb -s emulator-5554 pull /sdcard/screencap.png
    
  3. (Optional) remove the last screencap from your device (in this example, named "emulator-5554"):
    adb -s emulator-5554 shell rm /sdcard/screencap.png
    

Other notes:

If you've only got one device accessible to adb, you can simply do the following:

adb shell screencap -p /sdcard/screencap.png
adb pull /sdcard/screencap.png
adb shell rm /sdcard/screencap.png

If you'd like to see a one-liner to do the above, check out the neat example here: http://blog.shvetsov.com/2013/02/grab-android-screenshot-to-computer-via.html

References:

Sunday, 11 December 2016

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:

Tuesday, 29 November 2016

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:

Sunday, 27 November 2016

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:

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.