The latest version of Canary now has controls to globally slow down and pause animation right from Dev Tools. It’s such a huge help for both designing and troubleshooting your animations. New animation controls in Chrome Canary →
Tag Archives: devtools
Taking Chrome DevTools outside of the browser
Let me introduce what I call the Chrome DevTools App. It’s a standalone app that runs Chrome DevTools in its own process. It’s powered by node-webkit, and it’s able to run on Windows, Mac and Linux, completely independently of Chrome. From the same guy who brought/is bringing us RemoteDebug. Taking Chrome DevTools outside of the …
Continue reading “Taking Chrome DevTools outside of the browser”
Debugging iOS Safari and UIWebViews using Chrome DevTools
The ios_webkit_debug_proxy allows developers to inspect MobileSafari and UIWebViews on real and simulated iOS devices via the DevTools UI and WebKit Remote Debugging Protocol. DevTools requests are translated into Apple’s Remote Web Inspector service calls. The proxy detects when iOS devices are attached/removed and provides the current device list on http://localhost:9221. A developer can click …
Continue reading “Debugging iOS Safari and UIWebViews using Chrome DevTools”
Debugging Chrome using the Firefox Debugger
Developing across multiple browsers and devices is the main issue developers have when building applications. Wouldn’t it be great to debug your app across desktop, Android, and iOS with one tool? We believe the Web is powerful enough to offer a Mobile Web development solution that meets these needs. Enter an experimental Firefox add-on called …
Continue reading “Debugging Chrome using the Firefox Debugger”
Google Chrome DevTools Device Mode
Click the icon marked with the pink-ish circle to open Device Mode. Click the icon marked with the red circle to activate the Media Query Inspector. One can quickly choose a device and also throttle the network using the blue and orange dropdowns at the top. You might have to enable Devtools Experiments in Canary …
WebIDE – In-browser editing for Firefox
WebIDE helps you create, edit, and test a new Web application right from your browser. It lets you install and test apps on Firefox OS devices and simulators and integrates the Firefox Developer Tools for seamless debugging and inspection across those devices. This is a first step towards debugging across various platforms and devices over …
Using the DevTools to get first in line to buy Tomorrowland tickets
All Friday night we were busy monitoring the different API-calls from the ticketpage to Paylogic. We found out that the ticket page refreshed every 2 minutes with a delay of 6 seconds to send back the answer. The trick was to refresh the ticket page in your browser at exactly 10h. 57m. 54sec., whereafter the …
Continue reading “Using the DevTools to get first in line to buy Tomorrowland tickets”
Secrets of the Browser Developer Tools
RemoteDebug, an initiative to unify remote debugging across browsers
console.snapshot
Output snapshots and screenshots of canvas elements directly in the console of the Chrome Dev Tools var canvas = document.createElement(“canvas”), ctx = canvas.getContext(“2d”); // … //draw // … console.screenshot(canvas, 0.8); //Snapshot it and scale the output to 80% of the original size Resulting output is the image picture above. Also supports creating a snapshot which …