I noticed that after chrome updates last few days (60.0.3112.113) Chrome Inspector stop working with breakpoints.
What I need to do is highlight all jQuery elements on the page using jquery selector $(".myclass"). This is impossible if I am in break mode (breakpoint). In older versions of Chrome I could do that.
This is very important tool, because I need to check html nodes almost always in breakmode.
How can I restore this setting? My entire work depends of this tool :( Firefox tools are not so intuitive for me.
Related
Recently part of the app I work on was tested on Windows, and we found that dropdowns/select elements in one particular UI context rendered very differently on Chrome for Windows and Ubuntu than it did on Chrome for macOS.
I have tried inspecting the elements and the styles in Chrome dev tools on the different operating systems, but have been unable to see any difference that could account for the dropdown being as expected in one context, and completely unusable in another.
My question is what could account for this difference, and is there any way in dev tools to see what the difference is? I am new to debugging cross-platform styling issues, and am not sure where to start other than the styles tab in Chrome dev tools, and I haven't found what I am looking for there.
On macOS:
On Windows and Ubuntu:
(in the screenshot it appears as though the months are absent, but they are just white-on-white, so they can't be seen unless they are highlighted):
Selects are mostly styled by the browser / OS. So you can customize it up to a certain point (you can use -webkit-appearance: none; to disable some of the default styling, then apply what you need), but to really make it look identical throughout all platforms, you have to fake it with some regular elements like divs and lis and JS
My client uses ie8 and the site I made for them works fine in all other browsers EXCEPT ie8. Most things are out of place and I can't figure out what styles are causing this to happen. I am now using ie conditional styling, but I don't know what to put in my stylesheet since I am not sure what attributes are not showing up.
Anyone know a software that compared your style css to what styles are actually being used?
Assuming that you're running the latest IE, run the developer tools (press F12 while viewing your webpage, or go to IE's Tools -> F12 Developer Tools menu), and select the Emulation tab, then change the document mode to IE8. You can then inspect the element that's causing the issue. Unfortunately you'll have to do trial by elimination in order to find out what styles are or aren't being used.
I know of no software that will automate this for you, but you can check for this yourself at 'http://caniuse.com/#cats=CSS'
This keeps very up-to-date data on browsers and their feature compatibility.
Have you tried pressing F12 to access developer tools? If you click on the DOM explorer tab, you can browse through the code.
Once you find the part of the code you are interested in, you can click on it and see the relevant css in the panel on the right.
I've posted a photo here: http://epic-xp.com/wp-content/uploads/2015/02/test.png
Our application is running fine in chrome browser. But in Firefox some features and screens are not working properly. So it needs to be fixed .How can i do that and what could be the solution for that?
The best way to find out what is 'going on' is to debug the code in the browser.
Firefox has a built in debugger but i prefer to use a third party debugger called Firebug.
You should give Firebug a try as indicated in the first answer. However as far as I know you had to install it as Add-on, it is not included in the distribution.
I think your question is a little too general. Anyway, if the compatibility issue is about CSS style, you should check whether you are using WebKit-prefixed CSS only. For example, if you are using -webkit-animation, it would only work in Chrome and Safari. Actually you should set four CSS styles: -webkit-animation, -moz-animation, -o-animation and animation to make your code work in major browsers. There are some documents about Mozilla and WebKit CSS that might help:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Mozilla_Extensions
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Webkit_Extensions
I meet a problem that my page works well in firefox and chrome(almost the same look and feel) but very bad in IE. It's time consuming to adjust the differences. Is there any research has been done already to tell the differenceS, or any automation tool to examine the uncompatibilities?
BTW: which tool you guys are using when debugging in IE(like firebug for IE)?
Your best starting point is to always use some kind of "reset mechanism" like Eric Meyer's CSS Reset or framework like HTML5 Boilerplate, they help in reducing differences between browsers (not all, but most of it). If this is not possible (project is already in finishing phase, etc.) you can always ask questions here, check Position Is Everything for description of bugs, Quirks Mode, SitePoint reference and various other sites (Google is your friend :)). Hope this helps.
There is "debugging" tool for IE - IE Developer Toolbar - but it's usefulness can't compare to that of Firebug, Dragonfly and such. IE8+ does have better support for debugging, though… There are some articles that suggest using Visual Studio, but I haven't tried it. Mostly it's just trial and error with IE :).
ie7-js is a JavaScript file that automatically fixes many Internet Explorer bugs for all versions. Works like magic.
For fast and better results in IE you can use CSS Hacks for adjusting the HTML elements.
For IE we have IE Developer AddOn
you can download it here : http://www.microsoft.com/downloads/en/details.aspx?FamilyID=95e06cbe-4940-4218-b75d-b8856fced535
Welcome to the tiresome world of IE.
IE8 has some version of developers tools, hit F12 on your keyboard and it will pop up. (not present in 6&7)
There are many documented bugs in IE, a simple Google Search would help you out better, but a lot cannot be accounted for until you have your site working in FF.
What most developers I know do is to make the site in FF, make small changes for Webkit browsers then go over to IE (not including 6) and debug.
In my experience there really is no way to tell what IE is going to mess up next, so you'll probably just have to deal with it as it happens.
Is there anything like Firebug that you can use within Google Chrome?
Essential features I would like:
Inspect HTML source (select elements, delete them, etc.)
check CSS values (the built-in solution is weird, somehow)
There is a Firebug-like tool already built into Chrome. Just right click anywhere on a page and choose "Inspect element" from the menu. Chrome has a graphical tool for debugging (like in Firebug), so you can debug JavaScript. It also does CSS inspection well and can even change CSS rendering on the fly.
For more information, see https://developers.google.com/chrome-developer-tools/
Firebug Lite supports to inspect HTML elements, computed CSS style, and a lot more. Since it's pure JavaScript, it works in many different browsers. Just include the script in your source, or add the bookmarklet to your bookmark bar to include it on any page with a single click.
http://getfirebug.com/lite.html
Just adding some talking points as someone who uses Firebug / Chrome Inspector every day:
At the time of writing, there's only Google DOM inspector and no it doesn't have all the features of Firebug
Inspector is a 'lite' version of Firebug: The interface is not as good IMO, element inspection in both recent versions is now clunky, but Firebug is still better; I find myself trying to find the love for Chrome (since it's a better, faster browser experience), but for development work, it still just sucks for me.
Live preview / modification of DOM / CSS is still way better in Firebug; calculated CSS and box model view are better in Firebug;
Somehow it's just easier to read/use Firebug maybe because of the ease of navigating, manipulating/modifying the document in several key areas? Who knows. I'm used to the interface and I think Chrome Inspector is not as good although this is a subjective thing I admit.
The Cookies/Net tab are extremely useful to me in Firebug. Maybe Chrome Inspector has this now? Last time I checked it did not, because Chrome updates itself in the background without your intervention (gets your consent by default like all good overlords).
Last point: The day that Google Chrome gets a fully-featured Firebug is the day Firefox basically dies for developers because Firefox had 3 years to make Firefox's layout engine Gecko as fast as WebKit and they didn't. Sorry to put it so bluntly but it's the truth.
You see, now everyone wants to move away from Flash in lieu of jQuery motivated by mobile accessibility and interactivity (iPhone, iPad, Android) and JavaScript is 'suddenly' a big deal (that's sarcasm), so that ship has sailed, Firefox. And that makes me sad, as a Mozilla fanperson. Chrome is simply a better browser until Firefox upgrades their JavaScript engine.
F12
I love shortkeys
Try this, it's called Firebug Lite and apparently works with the beta version of Chrome.
You can also find it at:
https://chrome.google.com/extensions/
You can set this bookmarklet in your "Bookmarks Bar" in order to have Firebug lite always available in Chrome/Chromium browser (put this as the URL):
javascript:var firebug=document.createElement('script');firebug.setAttribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js');document.body.appendChild(firebug);(function(){if(window.firebug.version){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);
Or try user scripts: http://dev.chromium.org/developers/design-documents/user-scripts
jQuerify is the perfect extension to embed jQuery into Chrome Console and is as simple as you can imagine. This extension also indicates if jQuery has been already embedded into a page.
This extension is used to embed jQuery into any page you want. It allows to use jQuery in the console shell (You can invoke Chrome console by Ctrl + Shift + j".).
To embed jQuery into the selected tab click on extension button.
The official Firebug Chrome extension or you can download and package the extension yourself.
https://getfirebug.com/releases/lite/chrome/
Well, it is possible to enable Greasemonkey scripts for Google Chrome so maybe there is a way to sort of install Firebug using this method? Firebug Lite would also work, but it's just not the same feeling as using the full featured one :(
willshouse.com/2009/05/29/install-greasemonkey-for-chrome-a-better-guide/
This doesn't answer your question but, in case you missed it, Chris Pederick's Web Developer is now available for Chrome: https://chrome.google.com/extensions/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm.
Forget everything you all needs this browser independent inspector , dom updater
https://goggles.webmaker.org/en-US
just bookmark and go to any webpage and click that bookmark..
this is actually Mozilla project Goggles , amazing amazing amazing...
F12 (only on Linux and Windows)
OR
Ctrl ⇧ I
(⌥ ⌘ I if you're on Mac)
Please try Firebug Lite for Google Chrome
If you are using Chromium on Ubuntu using the nightly ppa, then you should have the chromium-browser-inspector