Live data from Hacker News

Chrome developer tools to master

apsdehal.in

41–50 of 100 posts

Re: Chrome developer tools to master

#41
post #30
post #14

Earlier quoted context omitted.

Can’t you just ask them if they have experience with the Chrome debugger? And if that’s such a deal breaker for you, you can teach them in the first week? I mean, it’s not like the Chrome debugger is such a complicated beast. Even if you have no experience with it, you can probably learn 90% of the useful tricks in a few hours.

I do. I just verify. They can also use Firefox or any other browser's tools if they are more comfortable. We are not hiring junior devs, and even if so I would still probably ask. But experienced front end devs should know how to use a browser's debugger. Like others said, it's a flag that they potentially don't have problem solving skills. I mean, if they put a single console.log near what they think is going wrong…

if they resort to console.logs, they are just randomly trying things.

How does that follow? It's just another way to check the state of a program at a given point.

Re: Chrome developer tools to master

#42
Chrome developer tools is just a godsend. Its so much better than any other debugger I've worked with, and miles better than firefox debugging tool

I personally use a chromium based browser called slimjet to do all of my development. It runs off v55 I think which is like 5 versions behind chrome. But its nice to have a dedicated app for debugging.

One tool that I find I use everyday is this: http://lab.maltewassermann.com/viewport-resizer/. It is WAY better than chromes native responsive webdesign tool.

When I first started developing I would always just go on stackoverflow and ask a dumb question. Now I consult my debugger and it answers everything I ever wanted to know.

Knowing how to use a debugger means I can reverse engineer html/css on any site too, so thats a big bonus.

Re: Chrome developer tools to master

#44
post #30
post #14

Earlier quoted context omitted.

Can’t you just ask them if they have experience with the Chrome debugger? And if that’s such a deal breaker for you, you can teach them in the first week? I mean, it’s not like the Chrome debugger is such a complicated beast. Even if you have no experience with it, you can probably learn 90% of the useful tricks in a few hours.

I do. I just verify. They can also use Firefox or any other browser's tools if they are more comfortable. We are not hiring junior devs, and even if so I would still probably ask. But experienced front end devs should know how to use a browser's debugger. Like others said, it's a flag that they potentially don't have problem solving skills. I mean, if they put a single console.log near what they think is going wrong…

I've written debuggers, and I still use console.log quite often. I would be pretty annoyed if I were silently judged on my choice of debugging tool.

Re: Chrome developer tools to master

#45

Chrome developer tools is just a godsend. Its so much better than any other debugger I've worked with, and miles better than firefox debugging tool I personally use a chromium based browser called slimjet to do all of my development. It runs off v55 I think which is like 5 versions behind chrome. But its nice to have a dedicated app for debugging. One tool that I find I use everyday is this: http://lab.maltewasserman…

Firebug and the new firefox debuggers are identical for me, not sure how chrome is better. Each has oddities.

Re: Chrome developer tools to master

#46
post #40

Can someone explain why the chrome browser simulator is so bad. I recently had to do some web work, normally don't deal with HTML . Anyways I tried to use the emulate view to test against iOS devices. Had QA test on a real device and it was all wrong. Ended up just getting a virtualbox of osx up to run the stimulator. Normally it isn't a problem using it but trying to line up slanted designs with pixel perfect placem…

Ran into this recently, there’s a meta tag you have to set for it to properly target mobile and not just scale it down https://developers.google.com/web/tools/lighthouse/audits/ha...

Re: Chrome developer tools to master

#47
post #7

This is great, besides the Sources tab, I use DOM and Event breakpoints a ton to debug a lot of problems. Something, I'm not sure if most people know, if you break somewhere (whether event or DOM), you can access the currently in scope variables directly in the console. It's extremely useful for finding out what's going on with something in the middle of hairy code at a specific point in time.

More on the different types of breakpoints available in Chrome DevTools: https://developers.google.com/web/tools/chrome-devtools/java...

Re: Chrome developer tools to master

#48

One thing that wasn't touched here is that you can actually map the developer tools to your local files. My old co-worker used Dev tools as his text editor. Pretty nifty!

Tutorial on this workflow here: https://developers.google.com/web/tools/chrome-devtools/work...

Re: Chrome developer tools to master

#49
post #44
post #30

Earlier quoted context omitted.

I do. I just verify. They can also use Firefox or any other browser's tools if they are more comfortable. We are not hiring junior devs, and even if so I would still probably ask. But experienced front end devs should know how to use a browser's debugger. Like others said, it's a flag that they potentially don't have problem solving skills. I mean, if they put a single console.log near what they think is going wrong…

I've written debuggers, and I still use console.log quite often. I would be pretty annoyed if I were silently judged on my choice of debugging tool.

This right here, I use both. Sometimes I like to just "debug by writing code to get more information"

Re: Chrome developer tools to master

#50

There's no end to amazement at how great Chrome tools are. When you think "they can't get anything more into them", they throw in additional things. Anything from full-page screen captures to animation profilers. I've yet to scratch the surface of what they have to offer. And they add new stuff continuously. Once every few months you open DevTools to be greeted with a new What's new in DevTools". And then there's Saf…

I didn't know about the screenshot! Found this article showing where it is: https://www.utilitylog.com/full-page-screenshot-chrome/

Also supports screenshots of arbitrary sections of the viewport: https://developers.google.com/web/updates/2017/08/devtools-r...

And specific HTML nodes: https://developers.google.com/web/updates/2017/08/devtools-r...

Post reply on HN