Profile

Cover photo
Umar Hansa
Lives in United Kingdom
3,786 followers|4,082,283 views
AboutPostsPhotos

Stream

Umar Hansa

Shared publicly  - 
 
#DevTools Tip: Set a breakpoint and navigate through the call stack with keyboard shortcuts

There are a few keyboard shortcuts when dealing with the debugger. A few are:

- Toggle a breakpoint while on a line: Cmd + B
- Select the next call frame: Ctrl + .
- Select the previous call frame: Ctrl + ,

https://umaar.com/dev-tips/23-debugger-shortcuts/
9
1
Sviatoslav Sydorenko's profile photo
Add a comment...

Umar Hansa

Shared publicly  - 
 
#DevTools Tip: Highlight paused statements in the debugger with a greater level of detail

When the debugger is paused, you can now see the exact portion of code which executes. It's highlighted in a darker shade of blue. This can also be useful when debugging minified code.

https://umaar.com/dev-tips/21-highlight-paused-statement/
11
3
Charles Moise's profile photoUyen Vu's profile photoHanh Pho's profile photoManoj Kumar S's profile photo
 
+Umar Hansa You're the man. Thanks for sharing all these #DevTools  animations. Huge help.
Add a comment...

Umar Hansa

Shared publicly  - 
 
Announcing Dev Tips: A developer tip, in the form of a gif, in your inbox 5 days a week. https://umaar.com/dev-tips/
19
7
Nacho Coloma's profile photoAndrii Trybynenko's profile photoGrahame Thomson's profile photoAmr Morsy's profile photo
6 comments
 
Perhaps you have different settings than me. I paused AdBlock and the sign up form showed up
Add a comment...

Umar Hansa

Shared publicly  - 
 
#DevTools Tip: Customise Device Presets

You can customise the device list you see when using emulation by going to the Settings cog, then select the Devices tab and finally check (or uncheck) the devices you care about.
5
Add a comment...

Umar Hansa

Shared publicly  - 
 
#DevTools Tip: Network Overview

Use the Network Overview to see a visual representation of requests and how long they took. You can also scrub through (drag or use the mouse-wheel) to narrow/expand the selection scope, the resource view updates in real time when you do this.
19
5
Changwook Doh (Chang W. Doh)'s profile photoJanardhan Raju's profile photoDaniel Nass's profile photoDenis Denisov's profile photo
 
Amazing!
Add a comment...

Umar Hansa

Shared publicly  - 
 
#DevTools Update: Animation Inspector

The experimental Animation Inspector gives you a visual overview of animated properties. You can resize them to control the duration, but also drag them around to control the delay. In addition to that, there's also a playback control (and a speed setting) so you can easily replay the animation.
40
44
Medy Belmokhtar's profile photoYI YING WU's profile photoDeivid Marques's profile photoStelios Charmpalis's profile photo
 
Which version?
Add a comment...
In his circles
2,183 people
Have him in circles
3,786 people
Bruno Gomes's profile photo
Trip Horton's profile photo
Алексей Привалов (Alex0007)'s profile photo
Justin Jones's profile photo
Alf Lervag's profile photo
Ray Grieselhuber's profile photo
Katherine Kuan's profile photo
Noel Sequeira's profile photo
Nuno Costa's profile photo

Umar Hansa

Shared publicly  - 
 
#DevTools Tip: Colour picker tool in DevTools is getting an upgrade.

- There's an eye dropper feature.
- Simple interface to pick your colour including alpha.
- Colour format switcher (hex, rgba, hsla).

https://umaar.com/dev-tips/22-colour-picker-upgrade/
21
7
Gabor Orosz's profile photoGokulakrishnan Kalaikovan's profile photoRevath S Kumar's profile photoKarthick gothandaraman's profile photo
 
I am waiting for this feature for so loooong! Thank you so much!!! <3
Add a comment...

Umar Hansa

Shared publicly  - 
 
 
Chrome DevTools tip: Finding DOM elements (in Elements panel) by CSS selector. https://umaar.com/dev-tips/7-dom-search-by-selector/ … (via @simevidas)
DevTools: DOM tree search by CSS selector
3 comments on original post
12
Add a comment...

Umar Hansa

Shared publicly  - 
 
#DevTools Experimental Update: Record Film Strip

The Network Panel's Record Film Strip feature can reload then record the progress of a webpage so you can ensure priority content is being loaded first. It'll even annotate the film strip with DOM Content Loaded / Doc Load events.
28
27
Emiliano Cecchetti's profile photoHanh Pho's profile photoEliazer Braun's profile photoSviatoslav Sydorenko's profile photo
2 comments
 
+Nikolai Aleksandrenko DevTools -> Experiments (Press "Shift" 6 times), will open more experimental options. Tested Chrome Canary. 
Add a comment...

Umar Hansa

Shared publicly  - 
 
#DevTools Tip: Promise Inspector

The Promise Inspector is getting some nice improvements, one of which allows you to log an inspected promise into the console panel.
25
12
Jean-Philippe PANIS's profile photoBada Bham's profile photo
Add a comment...

Umar Hansa

Shared publicly  - 
 
DevTools: State Of The Union 2015

Updates to DevTools and more.

Slideshttps://speakerdeck.com/addyosmani/devtools-state-of-the-union-2015
16
6
Theodoros Antoniou's profile photoStephen Fluin's profile photo
Add a comment...
 
#DevTools Tip: Cubic Bezier Editor

You can easily edit timing functions using the DevTools (e.g. the property value for the animation-timing-function CSS property). Open the editor tool and check out the available presets for some easing formulas.
49
40
Eyal Vardi's profile photoBrett Coffin's profile photoStelios Charmpalis's profile photoMulia Arifandi Nasution (mul14)'s profile photo
2 comments
 
+Umar Hansa what is the big difference between Chrome 40 and Chrome 43 in terms of rendering? I have a react demo with quite a bit animations that when run in Canary it gets a MASSIVE performance boost
Add a comment...
People
In his circles
2,183 people
Have him in circles
3,786 people
Bruno Gomes's profile photo
Trip Horton's profile photo
Алексей Привалов (Alex0007)'s profile photo
Justin Jones's profile photo
Alf Lervag's profile photo
Ray Grieselhuber's profile photo
Katherine Kuan's profile photo
Noel Sequeira's profile photo
Nuno Costa's profile photo
Places
Map of the places this user has livedMap of the places this user has livedMap of the places this user has lived
Currently
United Kingdom
Links
YouTube
Contributor to
Work
Occupation
Web Developer
Basic Information
Gender
Male