F*CKING DESIGNERS.

Stop sending me your freaking PNG. Don't even dare to FREAKIN' make me use Chrome DevTools to get your FREAKIN' color our of your FREAKIN' PNG.

Give me all your colors in FREAKIN' hex, rgba, or whatever you want.

Give me all the fonts you used.

Give me all the sizes, is it percentage-based? Pixels based? Donuts-based?

I don't give a damn that you think you went responsive-first. Show me the damn responsive mockups. Not just the desktop sized with a note: "Don't worry mate, I made so that it all goes well when responsive".

Oh god. Oh god.

I'm not an artist, I give zero shit about how great it looks.

I'm a programming poet, I want to write code without having to open (or download it first through torrent) the damn photoshop, sketch, or whatever you use.

They take freakin' months to dump a mockup and we have days to make it happen. The pain.

The pain is strong with those damn designers.

Fuck.

Me: *accidentally opens DevTools*

1.269427 milliseconds later...

Person: TEACHER! He’s HACKING INTO GOOGLE DRIVE!!!

Teacher: *glances at computer* Oh my gosh! That is ILLEGAL! Go to the office immediately.

I reluctantly headed to the office and calmly explained what happened. Luckily, some people have a bit of common sense and let me go.

!rant Decided to use the DevTools audit thing to try to improve my personal website. An embarrassing number of hours later and I finally have to tell the perfectionist in me to chill.

I don't know what's wrong with my project. But somehow, this is the screening when you debugs a React Native app within DevTools.

There are things that i wish i didn't see.

Yesterday, i went to a coffee shop to relax and reviewing my works. And suddenly a college friend of mine approach me and we started talking about work.

Me: So, What do you do at work? What's your stack?
Him: Not much of a new. Still working with wordpress, html,css and jquery.

So he started talking about how cool wordpress is and how he generates money doing sites.

Me: Can i see your sample works?
Him: Sure, *opens his shitty windows laptop with Web Tech stickers*. and handover his laptop to me.
Me: Woah. the design is so neat (I'm lying). But it's freaking slow man(REALLY FVCKING SLOW).

* I decided to open the devTools and inspected the source code. And I can't believe what i saw.

- 20+ images with 2~4mb file size
- 13 unminified javascript files with variable declarations that looks like minified.
- CDN's of bootstrap, foundation and semantic UI
- LOTS OF FVCKING PLUGINS

* I didn't told him what i saw. I just turn over the laptop to him and finish my coffee.

Him: My sites are cool right? I have a lot of pending projects right now. Easy money Bruh!
Me: Wow. *sips* coffee. and say goodbye to him and walkout.

I FEEL BAD FOR HIS CLIENTS!

Being majestic as a web developer:

1. Hacking through the DevTools to remove the anti-AdBlocker overlay + vertical scrolling paralysis on news website
2. See point 1

command line FTW

I disabled javascript in my browser. Amount of shit loading to read shitty article is insane.

I opened chrome devtools and it was 300 requests and 10MB to read 500 words.

Another news portal 250 requests 7MB to see 300 words.

WTF ?

And they’re fighting with internet traffic by lowering movie quality ?

I just add I have pihole with lots of wildcard filters filtering half of internet and fucking adblocker and those numbers are after those filters.

Are you fucking out of your mind ?

Fucking hypocrites.

Dear Tech-News Outlets,

Yes, I accept 30994 cookies and do not want to uncheck them one by one.
No, I don't want to subscribe to a newsletter full of content completely unknown to me - maybe let me stroll around a bit before asking me? But please don't ask me in the middle of reading the shitty article. Maybe make use of a so-called "sidebar" for shit like that?
Yes, I want to continue without turning off my adblock.
No thanks, I know how to turn it off, I'm going to remove this overlay now via devtools, alright?

Yours
An annoyed user

Not me but my friend was so fucking worried when I shown him a security breach website he made for his company.

So that's how it went: We were talking about programming and stuff and we came to authentication logic. We were both still at college and both noob programmers.
He told me he didn't use sessions because they suck server memory and he found this neat thing called "cookies". He explained them to me and I was like "holy fuck"... I asked him to show me the website and login to any account.
I opened chrome devtools and took a. look at the stored cookies. There was only one: userId, stored as a plain number straight from db primary key.

You guys should see his face when I changed the cookie values and was, all of sudden, using his website as a. completely different user.
I explained some stuff to him like database stored sessions or encrypted cookies and he told me he'd fix that shit up first thing in the next day.

On my personal journey to better privacy!

Wanted to change to Qubes, but since I wind down with games, that won't happen sadly and it seems windows still doesn't support proper gpu passthrough either, so might eventually change to linux host and windows guest or create a VM I use for everything else that isn't gaming, since I still really love the idea of having a snapshot backup system.

So since that isn't quite in my timeframe right now though: first move was to move to firefox, already done the change on mobile (love having dark reader and ublock on mobile!), now setting it all up on desktop, pleasant surprise was for sure that firefox finally seems to have chromes devtools pretty much mirrored, even the mobile suite of tools.

Loading of pages is also finally fast and much snappier than chrome from the first testing I could do (on desktop, on mobile it still kind of sucks in comparison, but I can deal with that).

Please suggest me all sort of privacy tools you got, especially with firefox in mind, but also host tools, be it windows or linux (e.g. some sort of traffic obfuscator that visits random pages that are SFW but make automatic traffic filtering hard, could probably make my own, but if there's something like that already, why not), I'll save all I can use.

Feeling powerful by disabling simply with developers tools that big and bad pop-up.

Which asks to deactivate my precious Ad-Blocker to be able to read this tiny article on your expired https newspaper site xD

I can troll all day by opening Devtools on a browser and change <input type=“password“> to <input type=“text“> they think i hacked google, facebook and their email acoount

Is Chrome trying to tell me something?

Anyone else have people that seem to constantly try to "prove" themselves to you in this weird, competitive way that only makes them seem... very annoying? I'll call him Bob here, but it's always something like:

Bob: Hi Almond, how's it going?
Almond: Ah not bad thanks, PSU blew up in the PC over the weekend though so that was a bit of a faff!
Bob: Ah no! How old's your PC?
Almond: Oh, like 7-8 years old now. I don't replace it often.
Bob: Really?! I replace mine completely every year.
Almond: Ah, cool.
Bob: Yeah, I'm a dev so I feel I need to. It's like my tool, you know.
Almond: Sure thing!
Bob: I actually spend quite a lot on it. I make sure it's got the fastest memory I can afford. Like, DDR5 stuff. That's really important, you know.

...etc., while I try to get out of said conversation for the next eternity.

Or:

(while in a conversation about a frontend bug I was looking at in Chrome devtools)
Bob: Hey Almond, you know Firefox actually had a plugin that did all this stuff before everything else?
Almond: Err, yeah, I think so. Used it back in the day.
Bob: It was called firebug. It was really good. Revolutionary.
Almond: Certainly was.
Bob: It was launched in January 2006 you know.
Almond: Right...
Bob: I used it back then.

...I mean damn, I'm all for being civil, but no-one cares you replace your PC every year, or that you know the year firebug was released, or that you once set up 5 identical PCs with different versions of Linux to run some benchmarks...

Windows' integrated calculator is so shitty I have to use JavaScript via DevTools to make proper maths

Wtf

Debugging JS,

*uses chrome devtools*, breakpoints work, everything loads, can work on fixing bug

*uses firefox devtools*, takes more time than IE to show up, the UI doesn't show up, can cry in the corner.

Why is firefox debugger so bad :/

React devtools in Firefox is such a pile of shit! It's slow, it hangs when selecting and it doesn't fucking show the whole component tree when it's too deep. I'm forced to switch to Chrome when I need to debug.

Anyone here has problems with it too?

Hhhmm I don't know if I'm the only one who's bothered by the new post button in the web app so

I am currently signing up for a college and need to accept some rules. First of all I have to accept some rules concerning some IT stuff. These rules should be found on their website. But they are nowhere to be found. At least they have a search function. Using this function I was able to find some old websites that did not even include the terms I searched for.
One search result pointed to a PDF viewer with the error message 'Failed to load PDF document.'. Assuming that the actual pdf document is somewhere referenced in the source, I open up the DevTools and search for 'pdf'. Quickly I found a fucked up URL ending in 'pdf'. Somehow the domain name repeated twice. This probably caused the prior mentioned error message. After copying and fixing the link I can finally read the (7 years old) rules.

Maybe this is a requirement to find these rules to be able to sign up.?

step 1) open and browse producthunt for new dev tools to use and try out
.
step 2) opens dev tool/app's website *ooh nice landing page*
.
step 3) tries to find api and documentation, scrolls to bottom of the webpage
.
step 4) "we are still in private beta, sign up to be notified about the final release!"
.
step 5) lol *sighs* bookmarks tab before closing it
.
step 6) repeat step 1
.
.

Well, f. me, I guess...

I wanted to watch a movie with a far away friend. Stayed away from screensharing and used rabb.it (they spawn firefox in a container/vm and stream it to viewers). The movie i wanted wasn't in the list, so i navigated firefox to youtube. The video was blocked whereever firefox runs -.-
Got creative, pasted the youtube-link onto a download-site and opened the download-video-link in firefox. Firefox attempted to open the video -.-
I tried to create a minimal webpage with the video in about:blank and the devtools-console. Firefox was configured for american keyboard layout, in the end i had to copy-paste everything with non-alphanum-characters in it.
Shortly after the youtube-video was loaded and ready to be watched, i felt like god if he ever were to use a pc. Then i got the message "my roommates made me go out with them tonight" -.- With the knowledge that both of us wont spend the evening as planned all my accomplishments seemed to perish.

Today a task was assigned to a coworker, he is a good guy, but one of those that never complain, never say anything, get there early, go to lunch at the exact same hour everyday, doesnt talk to anybody and gets off at exactly 6pm.

So, the task was submitted by QA, according to them, a disabled input could be enabled by going into the dev tools and enabling it...

So i went over the pm and told her (cos she is a cunt) that the ticket was just bullshit and that first of all, we had no control of it, but if that is the case, we can go over and add event listeners to all the inputs in the platform to avoid people changing them...like wtf?

Since she is a dumb cunt, she 'escalated' the task to the senior dev... he is also a total fucktard who doesnt know a shit. The dude said that the task was ok and we had to do it or not but it was better to do it, justifying the ticket in the most stupid and incoherent way... like wtf is to do with it? Tell the user to not go over the devtools and enable it? The fuckkkk

I felt like i was about to shit my kidney, seriously, but what can i do? It is not the first time things like that happen. The stupid fuck also let one of his friends add several migrations to change several tables columns just because of 'good practices' which in first place left the databas all fucked up and with fucked relations.

I'm just so tired of these fucks, incompetent motherfuckers... I told a friend about it and he said that that was nothing, it is worse when you have to work for banks and that the only thing i could do was to let it go and learn from it, to not do the same mistakes. Im thinking in quitting... what should i do?

Et tu Chrome?

Closing a tab should kill it.

I writes code, my code somehow causes an endless loop, tab gets at 25% i7 CPU.

I tells Chrome: "end it", Chrome won't close.

I wants to see under the hood to diagnose, Chrome unresponsive, forget about DevTools.

I Ctrl + Alt + Dels it

Sad Windows user

How many sh*t days does it need to make me down?
3 ...

I hate my company, for making everything overcomplicated and annoying.... I have to discuss with 3 peoples for 3 days to getting some gitlab premium licenses (20$ per month for 10 licenses)... Why do you need it? Why we can't use the free version? Why Why Why... It's not enough to tell them it will save us much times and improves the quality of development.....

Also I wanted to ask if we can to Jaxb or another Dev Conference this year... Then I got the information that we have about 2000 Euro for 10 people for training.......... What should we do if everyone buys a book this budget is out .... f*ck company....

Second day, half of the day was taken for fixing the live db on the fly cause of a bad structure of tables... at least fixed some other inconsistence too... later the day fixed a freaking shitty bug with Spring Devtools and 2 Classloader to make the product that I'm presenting in 2 days running.

Today next shitty day with discussion that everything I did last half year (introducing Microservices, Kubernetes, Kafka and other DevOps things) could be maybe useless when the external company will say that they use another ecosystem -..- for their microservices...

Someone looking for a disappointed java developer? I just want to develop the best product ever... I'm happy with every area... Frontend, Backend, DevOps, Fullstack, Architect in some kinds depends on the wishes and technologies.

Me: *opens devTools*
Firefox: yea bro lemme just ..uh.. hmm yeah so this is the css for the element, see?
Me: Thanks.
Me:
Me: this makes no sense, why would I ever do that?
Firefox: also you can't have width on an anchor tag. I can't put that rule into effect
Me: I didn't put any width on your inline element, you sure about that?
Firefox: yea try using display: inline-block
Me: No. I'll just delete that. *checks file*
Me: Maybe that line is wrong because IT DOES NOT FUCKING EXIST!

What is this shit? I just restarted you! What else do you need, a reinstall? Drink too much over the holidays?

It's like the css editor has become a shallow tray with rules on it, and as soon as you bump it a little everything spills over and then Firefox just thinks oops, I've got this font-size: 200% lying around, lemme stick this into the hr tag which makes sense because THERE CAN'T BE ANY TEXT IN IT.

Chrome dev tools!!!!! So vital. Also, my other devs!

Went to PC Gamer's website. Got blocked by an anti-adblocker. Opened the DevTools to remove the fuck out of it. Found class names that may have been made by the drunkest vodka-fed polish dude the Earth ever carried.

I makes a React mistake, alright I is fool.

I caused an endless loop, but Chrome won't let me diagnose it, because when you have an endless loop, you can't close the tab, can't open devtools, can't debug to find the source.

One thing that's been pissing me off about browser devtools lately is that they hide certain requests, like 301s, pretending they didn't make it, but if I look at my Nginx log I see there was in fact a 301 sent. OMFG, I hate this, it has caused me many hours lost on debugging.

This is my frontend tip of the day.
If you have a frontend that consumes an external API:
1) Retrieve the json responses from devtools
2) Save them in your project as json files (trim the data a bit if it's too long)
3) When starting your app with a special env var like MOCK_DATA, make your app mock the data and use your saved json data instead.

You can associate each response with an url regex.

The package fetch-mock mocks fetch really well, it lets through the urls that don't match anything.
This way you can incrementally add responses.

And voila, you have a mode where you have near instant page loads to test things manually, and you also have mocked data ready for testing eg, cypress.

<!doctype confusedRant 😕>

Plot: we need to release our website in two weeks which holds at least a thousand pages. All these pages are manually migrated from the old website, which doesn't have a database. Current status: 650 pages/1000 are completed, 40 different templates need to be adapted. I'm alone on these templates, my colleagues create the pages and fill the new database

So I'm working on the templates a WebDev coded for our website on a licensed CMS, and had this decently simple html block that looks like a square and consisting of roughly this (Emmet style):

a.area > blockquote > strong.title + p

After adding another <a> element inside the p, I noticed that my <a> wouldn't display and bust the whole look of the square.

Just for more details, the CSS the dev made is ultra specified (meaning each element is too precisely "described" : div.class .child .child2 { /* styles */ } when it could be .class .child2 for example). Also, the templates he made need to be compatible with any "module" the website has, thus the need of this high specificity

So I fired up the DevTools to check what happened, and had:

Expected: a.area > blockquote > strong.title + p > a
Actual result: some new a.area were wrapping the <strong>, the <p> and the <a> I just added. The source code was not showing any of this but just the rules I initially wrote - the expected result

Wtf?! I thought the JS the dev made was adding elements. I disabled said JS, and bam, these a.area were still wrapping everything!! What black magic would add these stupid tags I never asked for.

So I went looking in the CSS files in case some wizardry was happening, but everything was OK.

I tried changing my structure, changing tag (swapping a.area to p.area or without .area), HTML just said "nope, have those please".

Eventually I rewrote my own module out of frustration after three quarters of an hour fiddling with this stupid "module". I hate losing time for such shenanigans and under a lot of pressure because of deadlines.

Still haven't figured why those <element>.area would wrap everything out of nowhere...

!rant, more of an incredulous/cruelly amused "you had ONE job..."

so: biggest IT/PC/electronics store in my (and neighboring) country. their webpage, of course with the function to buy online, because of course.

the big green "Buy" button does nothing. doesn't work. doesn't react. I keep clicking it multiple times, shorter, longer, etc, because maybe their JS scripts are just shit so they slow.

nope.
okay. open devtools, JS console.
hover over the button: "Error: isMobile is not a function".
click the button: "Error: isMobile is not a function"

WAT.
search for isMobile in the script.
173 occurences.
fuck this.
console: isMobile = function(){return false;}
because I'm not on my phone.

click the "Buy" button.
works flawlessly.

...HOW?
THE WHOLE PAGE IS AN ESHOP YOU COMIC RELIEF INCOMPETENTS! =D

173 uses of non-existing function that blocks business-critical feature, THE ONLY CORE FEATURE FOR WHICH YOUR SITE EVEN EXISTS, and NOBODY, not the dev who fucked it up, NOT EVEN QA, noticed it??? =D =D

if I was the boss of the devs, or even boss of the whole company...
git blame
...and then i'd go the whole chain from the dev who caused the bug, through all of the QA people who "tested" that version before deploy, and I would personally, on the spot, fire each and every single one of them.

mainly because of who knows how much money this stupid not even a proper bug lost them.
but secondarily, because clearly none of those people give a single shit (n)or have an idea how to do their jobs.

=D =D

yeah but I was a good guy, filed a bug report in the "Complaints" section of their Contact form.
it goes to some call-center-like peon, so it starts with a sentence "forward this to your site's dev people outright to file as a bug, thank you".

but... HOW.... =D
HOW can you let something like this through? =D
the bottleneck of your whole user interaction, which forms first of the three steps OF THE MAIN AND MOST IMPORTANT FUNCTION of your whole business... =D
...I...
...does not compute =D

...BUT THEY USING ANGULAR, SO THEY ALL MODERN AND HIGH-TECH AND EVERYTHING'S FINE!!! =D =D

Developer tools needs to tell us from which file the API was called.

In spent more than an hour trying to figure out why a form didn't work.

I pressed the submit button and nothing happened, no error in the console and nothing in the Network tab in Chrome's devtools. And the action was being executed!

Then I found out there was a catch somewhere. I removed and it said that the url was wrong. But again, I debugged it and nothing seemed wrong. I even hardcoded the values.

At the end, it turned out that the initial "/" was missing in the request url...

Goddamnit, I've been rumaging around a CMS -generated site (not wordpress) for a friend in devtools.(to suggest improvements) I don't have much experience with CMS, but why is there so much fucking useless nested markup everywhere that has to go down the line. A simple paragraph has at least 6x nesting, a nav is "centered" by having a millionenty billionety divs on each side, there was even a span element for a single character inside a <p>.

What a fucking mess.

I'm so used to watching all websites with the dev tools open, that when I finally close it, they all look skewed to the right and not centeret.
Oh well, that's just a part of the game I guess

There are developer tools for Node which I understand what they do, but I don't understand what problem they are solving. It's everything so crazy

Why the F is my console.log not printing to the console!?!?!?!......level left as "Errors only" #doh

!rant

Saw a few guys having some issues picking up on angular 2. There's currently a really good course on angular 2 that's about a week and a half old, so pretty up to date, on pluralsight. Just search for angular 2 and order by date.

For those who don't wanna/can't pay, you can get 3 months for free on it by signing up on Microsoft devtools. If anyone wants direct link just say it(not sure if allowed).

Btw, I'm not affiliated what so ever with pluralsight, although I really like it. Just passing some information specially regarding angular 2 which is a pain to learn due to legacy code.

Hi Everyone,

I am working as a jr front end developer and wanted to study more about performance profiling in Chrome and finding memory leaks using Dev tools. I searched online for a while and not able to find a nice place to start with, can anyone help me out with a resource from where I can start the debugging performance using Chrome Dev tools.

It would be very helpful.

WTF new Chrome devtools breakpoints faded away and put inline within the code and for every one you set you get extra 3 for free... ???

Hi all,

Are there any developer tools that you wish were available for React, Angular or Vue?

A few schoolmates and I are looking to build an open source developer tool in order to help current engineers who are working with some of the popular front end technologies, such as React, Angular and Vue. We have seen a few prototyping tools for React and Vue and we also came across Bit Dev for React - would angular or vue developers like a tool like Bit Dev? We are looking to build something impactful and meaningful to the community and would really like your opinion on any developers tools that you would like to see.

Anyone else having issues with Chrome DevTools lately? Mine's been going so slow it's impossible to use.

Chrome: Y U always open script files in devtools I never told you to open

Every time I turn on device mode on Google Chrome devtools I lose my session (I'm assuming it deletes the cookies).

1. Is this just in my local setup?
2. Is there a way to keep my current session every time I turn on/off device mode on Chrome?
3. What other solutions would I have to do live tests of responsive design on my website?

Thanks!