Chrome Developer Tools – Easy Web Debugging You Need to Know • Hacker News Board

Chrome Developer Tools – Easy Web Debugging You Need to Know

#1

Post by dirkstrauss » Wed, Dec 05, 2018, 11:57 AM UTC

Chrome Developer Tools – Easy Web Debugging You Need to Know
dirkstrauss.com

Re: Chrome Developer Tools – Easy Web Debugging You Need to Know

#2

Post by dreen » Wed, Dec 05, 2018, 1:45 PM UTC

Another extremely useful feature is Network latency modifier. You should always test every website on at least a 3G connection, and make sure users can see important parts of your site in reasonable time.

For advanced users, you should NEVER use the Network latency modifier in Chrome, and use something like Network Link Conditioner on Mac. This is because Chrome applies the modifier after all the packets have arrived normally at the client, so testing things like HTTP/2 resource prioritisation becomes a problem.

Re: Chrome Developer Tools – Easy Web Debugging You Need to Know

#3

Post by bockmary7 » Wed, Dec 05, 2018, 1:45 PM UTC

Wow great article. Didn't know we could do so much with Chrome Developer Tools.

Re: Chrome Developer Tools – Easy Web Debugging You Need to Know

#4

Post by [deleted] » Wed, Dec 05, 2018, 2:10 PM UTC

[deleted]

Re: Chrome Developer Tools – Easy Web Debugging You Need to Know

#5

Post by gcb0 » Wed, Dec 05, 2018, 2:15 PM UTC

bockmary7 wrote: post #3

Wow great article. Didn't know we could do so much with Chrome Developer Tools.

very basic and available in Firefox too. heck, except the drag and drop (really...) all that is available since IE dev tools addon I guess (which started all that)

Re: Chrome Developer Tools – Easy Web Debugging You Need to Know

#6

Post by patrickas » Wed, Dec 05, 2018, 2:28 PM UTC

hey @dirkstrauss The leading image in the article is an unnecessarily huge 22 megabytes png image that can be resized and converted to jpeg without any noticeable loss of quality.

Re: Chrome Developer Tools – Easy Web Debugging You Need to Know

#7

Post by Etheryte » Wed, Dec 05, 2018, 2:30 PM UTC

gcb0 wrote: post #5

bockmary7 wrote: post #3

Wow great article. Didn't know we could do so much with Chrome Developer Tools.

very basic and available in Firefox too. heck, except the drag and drop (really...) all that is available since IE dev tools addon I guess (which started all that)

Seconded, this article only brings out the most basic functionality that's been available for a very, very long time in a number of browsers. Not really sure why it's on the frontpage.

Re: Chrome Developer Tools – Easy Web Debugging You Need to Know

#8

Post by xutopia » Wed, Dec 05, 2018, 2:47 PM UTC

Good thing there was the developer tool to change the URL of those images showing off the actions. They were 22 pixels high making them impossible to understand.

Re: Chrome Developer Tools – Easy Web Debugging You Need to Know

#9

Post by frankzander » Wed, Dec 05, 2018, 2:55 PM UTC

patrickas wrote: post #6

hey @dirkstrauss The leading image in the article is an unnecessarily huge 22 megabytes png image that can be resized and converted to jpeg without any noticeable loss of quality.

The right kinda guy you want to hire as webdeveloper

Re: Chrome Developer Tools – Easy Web Debugging You Need to Know

#10

Post by frankzander » Wed, Dec 05, 2018, 2:57 PM UTC

Nothing new showed here. It's the same stuff which can done with firefox devtools for internet centuries. Just use Firefox because you don't want to have a Google bug watching you surfing ... don't you? ;)