8 ms·

Chrome DevTools in 2016 and Beyond

183 points by rayshan 10y ago

fokinsean 10y ago
Excited to see better support for App Cache and Service Workers. I still have a bad taste in my mouth from trying to integrate them into one of my applications.
- foo123456 10y ago
  AppCache is no more, deprecated, dead. Luckily.
- sotojuan 10y ago
  Probably not a good answer, but if you use Webpack, Service Worker support is a plugin away: https://github.com/NekR/offline-plugin https://github.com/NekR/offline-plugin
purplerabbit 10y ago
Very happy about debugging Node.js in DevTools. Hard to imagine any third-party debugging applications having that amount of features and polish...
- afarrell 10y ago
  I usually try to pop into the debugger from within unit or integration tests, but have found this to be very slow and unreliable when doing it over a port. Have you found your experience to be different?What is your setup to debug mocha.js (or another framework) tests in chrome?
  - reaktivo 10y ago
    You should give VSCode a try. I was pleasently surprised about the quality of the debugger. A part from the UI I didn't have any other complaints.
- pmoleri 10y ago
  If you run your node code from electron you already have access to DevTools. It's really useful.
ryankshaw 10y ago
the last part of that where paul irish live edits sass looks pretty awesome! good job chrome team!
lucb1e 10y ago
They mention "Progressive web apps" and link to some info, but I can't figure out what the difference is from a normal webpage. Do they mean "web apps that use some stuff that was recently added to most modern web browsers"?
- pfooti 10y ago
  Generally, a "progressive web app" is something that behaves a bit like a regular native app, when the browser supports it and user allows it. This includes using serviceworkers to cache data for offline (and low bandwidth) use, making a home-screen icon that launches a standalone (from the task switcher perspective) window with no browser frame, and so on.
  - lucb1e 10y ago
    Pretty much what I thought, thanks! I'm a fan of the concept, hating apps that could easily have been webpages (public transport apps are often a good example), so it sounds like a good idea to give this a name and promote it. It's too bad that this name sounds like Microsoft came up with it in the early 2000s, but oh well.
    - sotojuan 10y ago
      It's an awesome idea and one that is actually not too hard to implement, at least partially. Problem is browser support of the APIs, with Safari lagging behind.
      - pfooti 10y ago
        Yah, the tricky bit is safari access. I'd love to put a bunch of time into using service workers, push notifications, and so on to make an app-like experience for my users (it's a forum / social network thingy for teachers), but mobile safari really puts a crimp in those plans. Instead I have my own homegrown cache and other hairy tricks that are nonstandard, but work on safari.
      - woah 10y ago
kylec 10y ago
Scrolling is broken in Safari on this page. Maybe the page authors should spend less time in the Chrome dev tools and more in the dev tools of other browsers.
- m4tta 10y ago
  Safari is the new IE.
  - Jgrubb 10y ago
    They really are doing themselves a long term disservice by letting this meme be absolutely true.
    - sotojuan 10y ago
      Hoping for the day I can use Service Workers in all mobile browsers.
  - kayone 10y ago
    Scrolls fine in Firefox, Edge, and IE11, so yeah. It's Safari.
    - Flow 10y ago
      Scrolling works fine in Safari unless you override the native functionality with a buggy/insufficiently tested script.
- jshevek 10y ago
  I'm glad these folks spend their time on Chrome dev tools rather than catering to the users of inferior browsers who expect people to invest extra energy catering to their preferences. Edit: This may help: https://www.mozilla.org/en-US/firefox/new/ https://www.mozilla.org/en-US/firefox/new/
  - chris_wot 10y ago
ozten 10y ago
Cool to see node-inspector go full circle, from cleverly re-purposed debugger UI to officially supported product.
chris_wot 10y ago
Is there a way of doing a long running log of all network, page load speeds, etc. in Chrome and store it in a reasonably efficient format? Like a perfmon/tracer for the browser. I ask this because I've been trying to track down an issue - probably caused by an ad on a news website - where Chrone pretty much freezes up on all processes. Whilst I can (and have) worked around it by installing uBlock Origin in browsers I'd really like to know what is causing the problem. I can't produce it locally so I'd like to get a log of all things that occur on Chrome over the course of a day.
- mateuszf 10y ago
  I'm not sure if this would be of any help, but maybe - so check it out: https://github.com/kdzwinel/betwixt https://github.com/kdzwinel/betwixt
billions 10y ago
After 5+ years of developing in Chrome Dev tools, I switched to Safari 2 weeks ago (Mac) and couldn't be happier. Chrome has become bloated. Ever notice CPU fans ramping up? Only while Dev Tools is open. Memory hog is an understatement. Furthermore, while Chrome's light, prebundled Flash was an asset 3 years ago it's now a liability: most websites now gracefully fallback to HTML5 video. Safari's upcoming leading edge standard support announcement makes it a candidate for best dev browser. (Hint: try Safari's Responsive Mode)
- deleted 10y ago
  [deleted]
- Flow 10y ago
  Many news sites insist on Flash still. The shitty thing is that if you use the Developer menu in Safari and change user agent to iPad Safari they often play the video using html5.
  - jayflux 10y ago
    That's by design. Please read the "Are you planning to add support for Safari on Mac OS X?" bit on http://www.bbc.co.uk/blogs/internet/entries/8be5501d-43e7-4bf6-8f1e-e7037980a0f0 http://www.bbc.co.uk/blogs/internet/entries/8be5501d-43e7-4b...
- cel1ne 10y ago
  Is the profiler still tracing instead of sampling? I once lost a day optimising frequently called JS-methods only to realise that the profiler caused the time spent there.
- drinchev 10y ago
  I switched to Safari 2 months ago for the same reasons as you did. Definitely feels better speed-wise. Also with iCloud keychain I decreased 1Password usage. For development though, I still can't get use to Safari's developer tools.
- matt4077 10y ago
z3t4 10y ago
NodeJS and Chromium have complete different debugging API's. It would be cool if they where the same, so you could reuse the debugging tools on both platforms.
- k3n 10y ago
  > Thanks to the V8, DevTools, and Google Cloud Platform for Node.js teams, you can now use all of DevTools’ powerful debugging features to introspect a Node.js app. See also: https://github.com/nodejs/node/pull/6792 https://github.com/nodejs/node/pull/6792
  - z3t4 10y ago
    Will probably have to wait a while until it lands in LTS, but this is awesome!
sjclemmy 10y ago
I'm glad to see Css source diffs in there. My workflow consists of tweaking Css in dev tools and then updating source. I've found that if I map directly so Devtools updates the source file I get lost very quickly. Incidentally I'd be interested in knowing of better ways of writing / debugging css.
- ehsanu1 10y ago
  http://livereload.com/ http://livereload.com/
davb 10y ago
It's ironic that scrolling stutters so much on a Google Developers page when using Chrome on Android (51.0.2704.81). Inertial scrolling is broken too. I rarely have this problem on other sites. It usually only occurs on Javascript heavy sites (disproportionately frequently on Google sites using that Material UI toolkit). I'm using a Samsung S7, but had this same issue on my Nexus 6.
lucio 10y ago
slowly the browser is becoming an JS IDE, and that's nice. Ctrl-Shift-I can become the "READY" prompt of the C64. The "next thing" is CDT auto-saving your changes to css and js for a website, and optionally re-applying them on future browsing.

183 points by rayshan 10y ago

Excited to see better support for App Cache and Service Workers. I still have a bad taste in my mouth from trying to integrate them into one of my applications.

foo123456 10y ago
AppCache is no more, deprecated, dead. Luckily.
sotojuan 10y ago
Probably not a good answer, but if you use Webpack, Service Worker support is a plugin away: https://github.com/NekR/offline-plugin https://github.com/NekR/offline-plugin

purplerabbit 10y ago

Very happy about debugging Node.js in DevTools. Hard to imagine any third-party debugging applications having that amount of features and polish...

afarrell 10y ago
I usually try to pop into the debugger from within unit or integration tests, but have found this to be very slow and unreliable when doing it over a port. Have you found your experience to be different?What is your setup to debug mocha.js (or another framework) tests in chrome?
- reaktivo 10y ago
  You should give VSCode a try. I was pleasently surprised about the quality of the debugger. A part from the UI I didn't have any other complaints.
pmoleri 10y ago
If you run your node code from electron you already have access to DevTools. It's really useful.

ryankshaw 10y ago

the last part of that where paul irish live edits sass looks pretty awesome! good job chrome team!

lucb1e 10y ago

They mention "Progressive web apps" and link to some info, but I can't figure out what the difference is from a normal webpage. Do they mean "web apps that use some stuff that was recently added to most modern web browsers"?

pfooti 10y ago
Generally, a "progressive web app" is something that behaves a bit like a regular native app, when the browser supports it and user allows it. This includes using serviceworkers to cache data for offline (and low bandwidth) use, making a home-screen icon that launches a standalone (from the task switcher perspective) window with no browser frame, and so on.
- lucb1e 10y ago
  Pretty much what I thought, thanks! I'm a fan of the concept, hating apps that could easily have been webpages (public transport apps are often a good example), so it sounds like a good idea to give this a name and promote it. It's too bad that this name sounds like Microsoft came up with it in the early 2000s, but oh well.
  - sotojuan 10y ago
    It's an awesome idea and one that is actually not too hard to implement, at least partially. Problem is browser support of the APIs, with Safari lagging behind.
    - pfooti 10y ago
      Yah, the tricky bit is safari access. I'd love to put a bunch of time into using service workers, push notifications, and so on to make an app-like experience for my users (it's a forum / social network thingy for teachers), but mobile safari really puts a crimp in those plans. Instead I have my own homegrown cache and other hairy tricks that are nonstandard, but work on safari.
    - woah 10y ago

kylec 10y ago

Scrolling is broken in Safari on this page. Maybe the page authors should spend less time in the Chrome dev tools and more in the dev tools of other browsers.

m4tta 10y ago
Safari is the new IE.
- Jgrubb 10y ago
  They really are doing themselves a long term disservice by letting this meme be absolutely true.
  - sotojuan 10y ago
    Hoping for the day I can use Service Workers in all mobile browsers.
- kayone 10y ago
  Scrolls fine in Firefox, Edge, and IE11, so yeah. It's Safari.
  - Flow 10y ago
    Scrolling works fine in Safari unless you override the native functionality with a buggy/insufficiently tested script.
jshevek 10y ago
I'm glad these folks spend their time on Chrome dev tools rather than catering to the users of inferior browsers who expect people to invest extra energy catering to their preferences. Edit: This may help: https://www.mozilla.org/en-US/firefox/new/ https://www.mozilla.org/en-US/firefox/new/
- chris_wot 10y ago

ozten 10y ago

Cool to see node-inspector go full circle, from cleverly re-purposed debugger UI to officially supported product.

chris_wot 10y ago

Is there a way of doing a long running log of all network, page load speeds, etc. in Chrome and store it in a reasonably efficient format? Like a perfmon/tracer for the browser. I ask this because I've been trying to track down an issue - probably caused by an ad on a news website - where Chrone pretty much freezes up on all processes. Whilst I can (and have) worked around it by installing uBlock Origin in browsers I'd really like to know what is causing the problem. I can't produce it locally so I'd like to get a log of all things that occur on Chrome over the course of a day.

mateuszf 10y ago
I'm not sure if this would be of any help, but maybe - so check it out: https://github.com/kdzwinel/betwixt https://github.com/kdzwinel/betwixt

billions 10y ago

After 5+ years of developing in Chrome Dev tools, I switched to Safari 2 weeks ago (Mac) and couldn't be happier. Chrome has become bloated. Ever notice CPU fans ramping up? Only while Dev Tools is open. Memory hog is an understatement. Furthermore, while Chrome's light, prebundled Flash was an asset 3 years ago it's now a liability: most websites now gracefully fallback to HTML5 video. Safari's upcoming leading edge standard support announcement makes it a candidate for best dev browser. (Hint: try Safari's Responsive Mode)

deleted 10y ago
[deleted]
Flow 10y ago
Many news sites insist on Flash still. The shitty thing is that if you use the Developer menu in Safari and change user agent to iPad Safari they often play the video using html5.
- jayflux 10y ago
  That's by design. Please read the "Are you planning to add support for Safari on Mac OS X?" bit on http://www.bbc.co.uk/blogs/internet/entries/8be5501d-43e7-4bf6-8f1e-e7037980a0f0 http://www.bbc.co.uk/blogs/internet/entries/8be5501d-43e7-4b...
cel1ne 10y ago
Is the profiler still tracing instead of sampling? I once lost a day optimising frequently called JS-methods only to realise that the profiler caused the time spent there.
drinchev 10y ago
I switched to Safari 2 months ago for the same reasons as you did. Definitely feels better speed-wise. Also with iCloud keychain I decreased 1Password usage. For development though, I still can't get use to Safari's developer tools.
matt4077 10y ago

z3t4 10y ago

NodeJS and Chromium have complete different debugging API's. It would be cool if they where the same, so you could reuse the debugging tools on both platforms.

k3n 10y ago
> Thanks to the V8, DevTools, and Google Cloud Platform for Node.js teams, you can now use all of DevTools’ powerful debugging features to introspect a Node.js app. See also: https://github.com/nodejs/node/pull/6792 https://github.com/nodejs/node/pull/6792
- z3t4 10y ago
  Will probably have to wait a while until it lands in LTS, but this is awesome!

sjclemmy 10y ago

I'm glad to see Css source diffs in there. My workflow consists of tweaking Css in dev tools and then updating source. I've found that if I map directly so Devtools updates the source file I get lost very quickly. Incidentally I'd be interested in knowing of better ways of writing / debugging css.

ehsanu1 10y ago
http://livereload.com/ http://livereload.com/

davb 10y ago

It's ironic that scrolling stutters so much on a Google Developers page when using Chrome on Android (51.0.2704.81). Inertial scrolling is broken too. I rarely have this problem on other sites. It usually only occurs on Javascript heavy sites (disproportionately frequently on Google sites using that Material UI toolkit). I'm using a Samsung S7, but had this same issue on my Nexus 6.

lucio 10y ago

slowly the browser is becoming an JS IDE, and that's nice. Ctrl-Shift-I can become the "READY" prompt of the C64. The "next thing" is CDT auto-saving your changes to css and js for a website, and optionally re-applying them on future browsing.