Live data from Hacker News

Chrome developer tools to master

apsdehal.in

91–100 of 100 posts

Re: Chrome developer tools to master

#91

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…

How is Chrome DevTools "miles better" than Firefox Developer Tools included with Firefox Developer Edition? I checked your blog to see if you've written a detailed comparison. I saw that your latest blog post is about writing your first user script in 2018, and you didn't use the term "user script"[1][2]; instead, you used the term "Tampermonkey Scripting" as if Tampermonkey originated user scripts. Do you have enoug…

This might just be from my own limited experience, but firefox developer tools provides way too much information when inspecting elements on a page. It gets to the point that its distracting. I don't need to know where an element is positioned on the page, I can see it on the page itself. There might be perhaps settings to change this, but the native settings are not to my liking. I also have noticed on the on/off many occassions I have used it in the last 2 years, there is sometimes noticable lag delays when inspecting items. I find the interface much less intuitive as well.

I will argue that firefox does have significantly better support for CSS grid layouts (as it came out with support first), but I don't use that often, and recently chrome unleased these tools in the last year to my knowledge.

I use chrome inspection tools tab for the following purposes now mostly: elements, console, sources, and network. I don't use any of the other tools very often, partially because I don't need too. This is what I mostly compared firefox developer edition tools too.

I've found when I wrote my first stylish extension and just debugging in javascript chrome is just a much more pleasant experience. I have never really run into any problems asides some issues regarding its native RWD tools for handling body margins. Firefox did not have this issue, but this is why I use the linked tool in the above comment

I was aware when I wrote that post that its not called tampermonkey scripting and it was called something else but I didn't remember at the time. Now I know its userscripts :)

Re: Chrome developer tools to master

#92
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…

I really appreciate when people who actually conduct the interviews give honest information about how their decision making process works. Especially because everyone will hammer the shit out of you and critique your thought process. Even if you think this paticular criteria is random/inefficient, people are missing a major opportunity to get inside the head of a person who could hire them.

Well, I'm not and (do not want to be) a manager, but I've turned into lead dev of this project after the former lead left (we're friends though so I had a heads up way ahead of time).

But we started this procedure together after just miserable results from "just talking" to candidates. Keep in mind most of the candidates were (and all are now) contractors. We did whiteboarding at first. It didn't seem effective and I hated it anyway. We could only ask very simple things, write a for loop, write any kind of recursive function that counts to 10, etc.

So I setup a project with create-react-app and IntelliJ IDEA. I give a brief intro to the IDE, showing that saved changes are built automatically, and usually reloads in the browser automatically and they just have to worry about the particular fetch call in one case, or adding the code (I don't say event handler) to handle a button press.

The code is 30 lines in one, and 40 lines in the other problem, including braces, imports, etc. I understand how intense interviewing can be but these, to me and our team, are super easy problems.

I've gotten a fair bit of heat for that post, but no real suggestions on how to improve the process.

Re: Chrome developer tools to master

#93
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…

Sounds like you are weeding out people who don't know how to use the one tool you are using.

Debugging is about narrowing down the problem until you can isolate it, and ultimately understand the problem to figure out exactly what it is.

Re: Chrome developer tools to master

#94
post #24
post #20

Earlier quoted context omitted.

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 co…

> What is being looked for is familiarity with the tools you are expected to know. Right. So just tell them straight out that "hey, can you show us how you would use the Chrome debugger to solve this?" instead of making a trap out of it?

I do. I say, I would use the debugger to find the problem, but how would you approach it?

Re: Chrome developer tools to master

#95
post #89
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…

doesn't the console tell you an error happens when trying to make that request? unless the typo URL is actually a valid URL that returns a 200 response

It sure does, they have to open the debugger to find that out though. I do give them the hint that "I would use the debugger".

Re: Chrome developer tools to master

#96
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…

> So far, the test seems to work well. How would you know.

We haven't had to fire anyone hired after utilizing it.

Re: Chrome developer tools to master

#97
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…

Sounds like you are weeding out people who don't know how to use the one tool you are using. Debugging is about narrowing down the problem until you can isolate it, and ultimately understand the problem to figure out exactly what it is.

The Chrome dev tools are more well-known than that. But I would let them use Firefox, or whatever they want. Even connect VS code or some other IDE to the browser if they wish (as someone else mentioned).

It's really more open ended than everyone here is making it out to be. I was just saying that so far, people open the dev tools or they just notice the URL is malformed in the source code. Or, they just freeze up and can't write a console.log in the right place to begin with.

Re: Chrome developer tools to master

#98
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…

Yeah I'd grab the URL and feed it to curl on the command line to start inspecting the HTTP traffic and start from there.

You're hired.

Re: Chrome developer tools to master

#99
post #95
post #89

Earlier quoted context omitted.

doesn't the console tell you an error happens when trying to make that request? unless the typo URL is actually a valid URL that returns a 200 response

It sure does, they have to open the debugger to find that out though. I do give them the hint that "I would use the debugger".

Ah nice -- yeah we have a similar interview that tests debugging as well so glad to hear other people do it. We have found it really effective as it is a skill that is often overlooked in technical interviews but is something you do on a day-to-day basis. We have it so some tests fail despite the fact they LOOK like they should pass. Props to you for having a practical technical interview :)

Re: Chrome developer tools to master

#100

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…

How can the red exclamation mark not bug you ?
Post reply on HN