Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Chrome developer tools to master

apsdehal.in

Post reply on HN
Print view View original

11–20 of 100 posts

Re: Chrome developer tools to master

#11

Post by 52-6F-62 »

fermuch wrote: post #10
kornish wrote: post #8

One thing I didn't see in the article: As well as setting breakpoints, one can trigger the debugger by including the statement debugger; in a script. Then, having the Dev Tools console open when that statement executes will automatically hop you into the debugger with access to variables in scope, etc. Easier IMO than manually setting breakpoints, especially when working with some transpiled languages.

For transpiled languages: if you set up source maps correctly, you can access the non-transpiled language and the devtools will set up rules on the correct places (in this case, breakpoints, which also jump automatically to the original source instead of the transpiled version)

This works great with TypeScript

Re: Chrome developer tools to master

#12

Post by dmitriid »

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 Safari (I'm on a Mac). I still prefer Safari to Chrome and Firefox. But their DevTools... &-10 years ago their DevTools where best-in-class, putting even Chrome's DevTools to shame. And then they not only stagnated, they regressed. Good luck using any part of whatever the Safari DevTools are anymore.

Re: Chrome developer tools to master

#13

Post by fermuch »

0xfeba wrote: post #3

I implemented two simple interview tests in order to weed out people who can't do simple debugging. In one, I hand them my laptop and give them a basic create-react-app sample that uses fetch on a remote URL, but there's a typo in the URL. I tell them it's supposed to fetch a remote REST API and parse the JSON but it doesn't work--how would you fix it? So far, two ways to pass: Just look at the source code, or use th…

And what is the the second test?

Re: Chrome developer tools to master

#14

Post by judofyr »

0xfeba wrote: post #3

I implemented two simple interview tests in order to weed out people who can't do simple debugging. In one, I hand them my laptop and give them a basic create-react-app sample that uses fetch on a remote URL, but there's a typo in the URL. I tell them it's supposed to fetch a remote REST API and parse the JSON but it doesn't work--how would you fix it? So far, two ways to pass: Just look at the source code, or use th…

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.

Re: Chrome developer tools to master

#15

Post by barbegal »

judofyr wrote: post #14
0xfeba wrote: post #3

I implemented two simple interview tests in order to weed out people who can't do simple debugging. In one, I hand them my laptop and give them a basic create-react-app sample that uses fetch on a remote URL, but there's a typo in the URL. I tell them it's supposed to fetch a remote REST API and parse the JSON but it doesn't work--how would you fix it? So far, two ways to pass: Just look at the source code, or use th…

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.

But if they don't know how to use the Chrome debugger then that probably correlates to not being able to do many other tasks. That few hours just teaching them how to use Chrome debugger turns into weeks of teaching them how to do lots of tasks.

I have nothing against teaching new hires but for some businesses it is a significant cost so it makes sense to weed out applicants that won't be able to get stuck in straight away without a holding hand.

Re: Chrome developer tools to master

#16

Post by majormajor »

judofyr wrote: post #14
0xfeba wrote: post #3

I implemented two simple interview tests in order to weed out people who can't do simple debugging. In one, I hand them my laptop and give them a basic create-react-app sample that uses fetch on a remote URL, but there's a typo in the URL. I tell them it's supposed to fetch a remote REST API and parse the JSON but it doesn't work--how would you fix it? So far, two ways to pass: Just look at the source code, or use th…

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 don't read them as looking for experience with one specific tool so much as a systematic approach vs shotgun just-print-out-everything-everywhere aimlessness.

Re: Chrome developer tools to master

#17

Post by judofyr »

barbegal wrote: post #15
judofyr wrote: 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.

But if they don't know how to use the Chrome debugger then that probably correlates to not being able to do many other tasks. That few hours just teaching them how to use Chrome debugger turns into weeks of teaching them how to do lots of tasks. I have nothing against teaching new hires but for some businesses it is a significant cost so it makes sense to weed out applicants that won't be able to get stuck in straigh…

I see that knowledge about Chrome debugger probably correlates with knowledge about other tasks, but there has to be some false negatives, no?

And mostly I find it a bit dishonest. If you have a preferred way to solve a problem in a company you should state it up-front: "Find this bug by using the debugger, not console.log, because that's the way we do it here". If the method does not matter, you should let they solve it their own way and see how efficient they are.

> I have nothing against teaching new hires but for some businesses it is a significant cost so it makes sense to weed out applicants that won't be able to get stuck in straight away without a holding hand.

Right, and that will show when they use so much time adding console.log everywhere without finding the bug. Measure the time and understanding of the problem/code/solution, not the tool.

Re: Chrome developer tools to master

#18

Post by savanaly »

judofyr wrote: post #14
0xfeba wrote: post #3

I implemented two simple interview tests in order to weed out people who can't do simple debugging. In one, I hand them my laptop and give them a basic create-react-app sample that uses fetch on a remote URL, but there's a typo in the URL. I tell them it's supposed to fetch a remote REST API and parse the JSON but it doesn't work--how would you fix it? So far, two ways to pass: Just look at the source code, or use th…

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.

That's the web developer equivalent of being able to use a hammer as a carpenter, though. That's a bit of an exaggeration but only a bit. Would you hire a carpenter if he couldn't use a hammer effectively? Sure, you could spend a few hours teaching him and probably get him to be good enough to be useful. But would you really rather hire him over someone who knows how to use a hammer if that's the only differentiating factor between the two people?

Re: Chrome developer tools to master

#19

Post by judofyr »

savanaly wrote: post #18
judofyr wrote: 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.

That's the web developer equivalent of being able to use a hammer as a carpenter, though. That's a bit of an exaggeration but only a bit. Would you hire a carpenter if he couldn't use a hammer effectively? Sure, you could spend a few hours teaching him and probably get him to be good enough to be useful. But would you really rather hire him over someone who knows how to use a hammer if that's the only differentiating…

If you already know that the hammer is the best way to solve it, why wouldn't you ask them to solve it with a hammer? Using the right tool is tricky and there are cases where console.log is more efficient than a debugger:

- It's a debugger you're not used to

- The stack/application is complicated and works weirdly with the debugger (e.g. exceptions are captured and stack traces are lost)

- Many things are happening at the same time so it's quicker to scan through 100 lines of output than stepping through 100 breakpoints.

I know how to use a debugger, but I also know how to console.log in such a way that I can quickly scan the output, or output a DOT file so I can visualise the flow and data as a graph.

Re: Chrome developer tools to master

#20

Post by figgis »

judofyr wrote: post #17
barbegal wrote: post #15

Earlier quoted context omitted.

But if they don't know how to use the Chrome debugger then that probably correlates to not being able to do many other tasks. That few hours just teaching them how to use Chrome debugger turns into weeks of teaching them how to do lots of tasks. I have nothing against teaching new hires but for some businesses it is a significant cost so it makes sense to weed out applicants that won't be able to get stuck in straigh…

I see that knowledge about Chrome debugger probably correlates with knowledge about other tasks, but there has to be some false negatives, no? And mostly I find it a bit dishonest. If you have a preferred way to solve a problem in a company you should state it up-front: "Find this bug by using the debugger, not console.log, because that's the way we do it here". If the method does not matter, you should let they solv…

They didn't make a simple "if you can't use developer tools X way then I'm not hiring you" statement.

>So far, two ways to pass:

Would mean that they understand there are a hundred different paths to solve a simple problem. What is being looked for is familiarity with the tools you are expected to know. And littering a shit ton (not just a simple "Started-HH:MM:SS.mmm" or "Stopped-HH:MM:SS.mmm" with timestamps) of console.log statements when you first start debugging is a pretty fair red flag.

Post reply on HN