What is Reddit's opinion of
Google Chrome Developer Tools?
From 3.5 billion Reddit comments
➔ Google Chrome Developer Tools website
By popularity on Reddit, this Service is:
39 reviews of this app found across Reddit:
Chrome Mobile Emulation is built right into your current version of Chrome! I recently started using it while developing and it has helped immensely with building responsive sites. On top of adapting to various viewport sizes you can do things like emulate touch events (click) and pinch to zoom (shift+click&drag). Check out the short demo video and read all about this tool which just needs enabled in the current version of Google Chrome!
Hmm, this one might be chrome only (or they just forgot to add it there), but console.table can be useful too.
- See how your site would look on an iPhone, Galaxy, and Kindle without having to buy them
- Touch gestures are also emulated
It is actually available on the stable release of Chrome. From their documentation note it sounds like certain features of the component may only be available in Canary at this time.
https://developers.google.com/chrome-developer-tools/docs/mobile-emulation
Strange how it doesn't bring up awesome tools like Firebug / Opera Dragonfly / Chrome Developer Tools that allows you to dynamically change the DOM and styles on the fly. That's pretty much all I need to design in the browser.
That's from Chrome's developer tools. On your desktop, you can access them by clicking Developer Tools under the Tools menu, or by pressing F12 on Linux or Windows or Cmd+Opt+I on OS X.
Chrome on the desktop can also be used to inspect a tab in Chrome on Android, which is how I got that information. To do this you'll have to enable USB debugging on your Android device (under developer options in the system settings), then plug the device into your PC or Mac and go to chrome://inspect/#devices on the desktop. More information here.
There's a similar process that can be used to debug Safari on iOS, but it requires a Mac and I can't remember the setup offhand.
I've had a lot of fun using the chrome developer console. They have a lot of great features that make debugging much more fun than just looking at a flat log.
I've been using this guide to make some pretty useful console visualizations.
The documentation is pretty good too.
Then you're in for a treat, the counting you explain already exist! Call console.count with a label to increment the counter. See the API reference for the console object in chrome: https://developers.google.com/chrome-developer-tools/docs/console-api#consolecountlabel
Another favorite of mine: If you're looking at a particular line of code, and you want to add a console.log() at that line without having to go edit your source code and reload (thus producing off-by-one errors for all your existing breakpoints), you can use a conditional breakpoint (ctrl+F for "conditional").
The purpose of conditional breakpoints is of course to break only if some condition is true. But you can put arbitrary JS as your condition, so if you put 'console.log(someValue)' it will execute that and log the value, every time the relevant line is executed, but it will never actually stop, because 'console.log' always returns undefined.
You can use the console to run ANY JavaScript. My god, it's amazing.
Did you know you can also insert debugger; into your code to make the debugger pause automatically?
Did you know that you can use the console to run any code from the same scope as the currently-paused line?
You can use the console to do these things, too!
Chrome's console and debugging tools are a gift to us mere mortals.
Edit: Shoot, I meant to link to this: https://developers.google.com/chrome-developer-tools/docs/commandline-api
Links for Android and iPhone on how to inspect element:
Android (Chrome): https://developers.google.com/chrome-developer-tools/docs/remote-debugging
IOS (Safari): https://robandlauren.com/2013/09/14/test-on-devices/
The main reason to use this would be that it accumulates a counter each time console.trace() is called from the same line. However, if that's the main motivator, then one would probably get more bang for their buck by using <code>console.count(label)</code> combined with breakpoints.
randnum = Math.floor(Math.random() * 5) ... insults[num] // num == ??
You should learn how to use your favorite browser's debugging tools. Personally I would recommend Chrome dev tools, but firefox's dev tools are fine too. For example, try running your code with the dev tools open. You should see an error in the console.
If you're interested, there's a pretty nice introduction to chrome's dev tools here.
No problem. I doubt I spent more than 5 minutes on it. Chrome's profiling tool is pretty awesome. The flame chart view is especially handy.
>I'm totally green and landed in this gig by happenstance.
Well, I guess braindead hiring practices are the real culprit here then.
Anyway, get started by reading this site: https://developers.google.com/chrome-developer-tools/
Probably unrelated, but label elements usually apply to inputs, not forms:
<form id="LogInForm"> <label id="usernameLabel" for="username"></label> <input type="text" id="username" name="username"/> </form>
As /u/shmiguy said, it really sounds like you've got some other code running that effects the label name, and it's tough to diagnose without that code.
Are you using any js libraries? Any browser extensions or userscripts running?
Put a console.log('DisplayUsername') statement in DisplayUsername() to see if it's getting run more than once.
Use debugger breakpoints to stop execution in DisplayUsername() and make sure all of your variables are of an expected value.
If you don't have any web development experience, you will probably have a hard time making sense out of the information provided in Dev Tools.
In a nutshell, you can open Chrome Dev Tools and log what events are triggered, what code is called and how much time is spent doing it. You would then look for something being vaguely off, such as an expensive event handler being triggered on a short timer.
Here's some pointers to get you started:
https://developers.google.com/chrome-developer-tools/docs/timeline
https://developers.google.com/chrome-developer-tools/docs/cpu-profiling
A more general approach would be to use CSS beautifier, like ProCSSor.
If you'd like to have a local solution, there's js-beautify (don't mind the name) or, if you use Chrome, there's an option for Pretty Print (again, works with CSS as well).
At this point most of your gains will probably be in workflow.
Something like using chrome for live editing can save a lot of time - you can make adjustments in the inspector and the moment you leave that property, it's saved to the file. "Oh that's off a few pixels?" Click on "margin-top:5px" press up until it lines up perfect, click away, done, saved, css is updated.
Here are a few videos. These may or may not be helpful, but I think that they make for good watches.
I particularly enjoyed the I/O 2012 video.
Here's whats happening. You have html that is basically like this:
<div> <a>Text</a> </div>
Where the div makes the black box and the link makes the white text.
When the button is being faded out with javascript, its fading out the link, not the div. So, that results in the text fading away but the box remaining. When the link fades out all the way, the javascript then gives the link a display:none causing the outer box to disappear because it has no content anymore.
Chrome Dev Tools FTW.
No XHR was being used on this site. If you're unsure ( and the visible page reload throbber doesn't give you a clue) , both FF (with Firebug) and Chrome dev tools have a feature to pause any XHR execution and pinpoint the code doing the request.
https://developers.google.com/chrome-developer-tools/docs/scripts-breakpoints#xhr
.... I deleted that comment on accident from my phone. Sorry.
Anyway, I used it last about 3 weeks ago. I used it for about 4 months before that for every day development at work because some IT guy screwed up and revoked my Admin rights on an upgrade.
FF is very limiting. Firebug is in no way redundant. The JS debugging is absolutely horrible and ajax debugging is pretty much non-existent. The CSS box inspector is just terrible. And the RGB is still the case by default on the element inspector, you must have changed it to Hex and forgot.
There is actually hardly anything related to dev tools out-of-the-box with Firefox. Element inspector is pretty much it, and they even make that a hassle by making it default to RGB.
Firebug is slow as balls and Chrome has pretty much everything it does already built in. Plus mobile emulation.
First of all, Chrome and Sass 3.3 together with workspaces and source mapping make it so you don't have to worry about recompiling or refreshing or anything like that.
Second, one of the great things about Sass isn't some magical thing it offers that replaces things you do in CSS -- rather, it allows you to write CSS just like you normally would but much, much faster. The time savings alone with variables and nesting is worth it.
If you want to edit on load, you can use Fiddler4 for Windows http://www.telerik.com/fiddler for changing the files before they reach the browser.
If you want to edit on fly, Chrome developer Tools provides this option. Checkout: https://developers.google.com/chrome-developer-tools/docs/authoring-development-workflow#scripts
Point to note, these changes will remain local as browser won't have access for editing source files in the server. But if the files lies in your local filesystem, you can edit them. Source: http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/#toc-workspaces
I used developer tools from Chrome. Other browsers have their own versions typically, but I prefer Chrome.
This will be by far one of the most useful resources for you in web development. I recommend watching their introduction videos if you are starting out. They are a little long, but completely worth it.
https://developers.google.com/chrome-developer-tools/docs/videos
With Chrome: Open Developer Tools and bring focus to the console Ctrl + Shift + J or, for Mac, Cmd + Opt + J. From https://developers.google.com/chrome-developer-tools/docs/shortcuts#opening-devtools
Other browsers have consoles too if you can figure out how to open them or use plugins.
I just saw the latest from a html5rocks article on new Chrome 33 features and I thought you might be interested that getEventListeners() is now part of devtools.
> Warning: mysql_fetch_row() expects parameter 1 to be resource, boolean given in /home/content/05/8672105/html/php/display.php on line 34
Turn off the PHP debugger ;)
Furthermore, I expected that your icon/logo at the top left would be a link to the start page of your site.
Also your site is not responsive, if you inspect the site with Google Chrome's mobile emulation for instance as an iPhone 5 or just by resizing the browser window the page does not scale its contents. So my advice is to look into CSS Media Queries.
Best of luck,
Fellow Swede
Man - I wish I could be of more help. Looks like everything ought to be working...
Here's a little primer on referring to files, depending on their location relative to your html file. Quick Reminder About File Paths
Finally, when I'm having trouble with this, I usually resort to my browser's developer tools, and take a look at the filepath of the background-image property that my browser is actually processing. Primer on Chrome's dev tools here: link
I'm off to bed now, but good luck! I'll check back tomorrow.
When I google "Developer tools chrome" this is the first result: https://developers.google.com/chrome-developer-tools/
which is exactly what I described in my above comment so I have no idea why you facepalmed.
Note that if you want to debug javascript code on a phone there's an ADB plugin for the PC Chrome browser that enables this.
Follow this link, follow the instructions, and you can tether a USB cable from your PC to your phone.
You can then use a Chrome debugging window on a PC to interact with the web site running inside the Android's Chrome browser-- set breakpoints, watches, examine / change HTML and CSS, use the console window to change values or log statements to, etc.
For developing mobile web sites this has been very useful.
On Chrome for Windows, F12 opens the Inspect Element panel at the bottom of the screen. You can edit items in the Inspect Element panel and as changes are made, the actual page will update with the changes. This allows you to spoof webpages and take screenshots like the one I did.
Well, there's a way to use the dev tools on your pc coupled with the browsing on your phone. https://developers.google.com/chrome-developer-tools/docs/remote-debugging
Also, take a look at ngrok to expose localhost out on the web - its a fantastic tool for debugging, especially to open your apps on mobile devices
It's good to be in that mind state when writing CSS, just like the authors were when they made the language ;)
BTW: The way I got that code for you was to, in Google Chrome, right-click on the flair, choose Inspect Element, then find the class of the element.
Read more about CSS on MDN, and read more about Chrome dev tools, then you'll be on your way to a beautiful subreddit.
You can do all this and more with the Chrome debugger. Chrome is the #1 tool I use like every single damn day. For javascript it's way better than firebug. If you're unsure of how to do something, consult the documentation: https://developers.google.com/chrome-developer-tools/docs/overview
Again, let's work on one small change at a time (it makes no sense to have the conversion formulas in place if the string splitting isn't working, right?)
"var temp = degrees.split("C" || "F", 1);"
Well, "||" is the logical OR operator, and is not what you'd want here. You can check what the result of that expression is by executing the javascript: alert("C" || "F");
Let's check the Mozilla Developer Network reference for the String.split method. The method signature looks like this: string.split([separator][, limit])
Suppose the input string is "10C", and the separator is "C", and the limit is 1. Then, (from the documentation again): "The split method returns the new array" "but it truncates the returned array to at most limit elements" So temp = ["10"] - so far so good, but the next line has limit = 2, so you need to be mindful of the returned array.
Chrome's inspector is one of the best debuggers you can find.
https://developers.google.com/chrome-developer-tools/
Breakpoints, for example:
https://developers.google.com/chrome-developer-tools/docs/scripts-breakpoints
1) Remote debugger? Chrome has one built-in too https://developers.google.com/chrome-developer-tools/docs/remote-debugging
2) Simulator/emulator? https://developer.android.com/guide/developing/tools/emulator.html
and install the chrome app in that
3) Ah, no, chrome doesn't actually let you forge http requests..sadly..