Is there a way to debug a css file in IE? I wish to see if a particular background-image is loaded or not.
This is in reference to the question:
extjs gridfilter icon not showing in IE but shows in Firefox
Or for any version of IE, try FireBug Lite. You can simply bookmark the link given on that page (bookmarklet) and then, to open a FireBug like thingy whilst on IE, simply click on the bookmark you just added.
Use the built in browser troubleshooting tool (aka Developer Toolbar) by pressing F12.
It is built into IE8 and later, but you can download and install it in earlier versions.
Do you want to target IE specifically in your CSS? If so I wrote a blog post about this not so long ago, please have a read: http://ajthomas.co.uk/blog/?p=299.
Related
I'm trying to find a way to debug my CSS animations in Chrome specifically. I downloaded the latest version of Chrome Canary since it was supposed to contain this feature. Multiple sources confirm that there should be a button in the DevTools under the style tab.
However, the button is simply not there. It's also not available in the most recent version of regular Chrome, or in the Chrome a colleague of mine uses. Is there some setting I'm missing?
It's very hard to find a good source for this problem, that's why I'm asking you guys for help :)
I'm not sure why there's no button, but you can open the animation tool by selecting it from the context menu in the console drawer.
My chrome version is 61 and the animation button is now moved to "More tools" under the 3 dots to the top right. Hope my answer can help those who view this post recently.
I have a problem with the inspector in Firefox browser. After some time of use, in the "rules" tab, system don't want to show me CSS syntax suggestions. After switching the inspector off and on, everything returns back to normal, but ... again ... after a few moments, the system stops showing me syntax hints.
with syntax hints without syntax hints
after a couple of minutes
Is there any FIX for this? I'm using newest "FireFox Developer Edition" (same thing on normal "Firefox").
UPDATE:
I discovered that inspector starts to work improperly when I restart a page which I have been "inspecting".
Are you using Firefox Developer Edition 41.0a2? It appears to have possibly been a bug that is being corrected.
I can confirm this happens in Firefox 40.0.2.
I also saw this in Firefox Developer Edition 41.0a2.
I updated Firefox Developer Edition to 42.0a2 and am no longer able to recreate this phenomenon.
Install firebug plugin for firefox. Ita a very good debugger tool. After installing enable it and right click on page and do "inspect element with firebug"
I am involved recently in a project to restyle a certain published website. I have no access to the code and the CSS files. what I can to do is to load my custom local CSS as a new "user stylesheet" into firefox or chrome using the extension Web developer toolbar which is available on chrome, opera and firefox.
For a reason, "Web developer toolbar" offer a great feature called [Add User Style Sheet] which enable me to load my local CSS and tweak it using firebug to restyle the page as needed.
but of course some tweaks are necessary to do over IE and there is no tool like "Web developer toolbar" over IE. I know there is a way to load a user style sheet from Internet options > accessibility. but it is very dummy, specially when switching from various IE versions using the built-in IE developer tool. and of course that user style sheet will be active only when restarting IE!! ... so it doesn't make sense doing modification on my CSS and restart to see the affected modification !!
Until the time we decide to eliminate IE forever, I am wondering. if there is a way/tool to load my custom CSS over IE and tweak it from outside IE and just reload it? or by refreshing the page[F5]?
Thank in advance.
It wont be easy or quick but the best solution for you r problem would be to do your css styling with IE code inspector. I know its not as good as Firefox or chrome but you will at least be able to see what works and what doesn't. You can ofcouse copy and paste directly out of IE code inspector into your stylesheet but if you refresh you would have to insert all the new styles again.
I am looking for a fix for styling a webpage that so that a webpage on google chrome, will look the same as it does on firefox, meaning, is there some syntax in css to make all of the web browsers look the same. does this exist (I would also like one for I.E., and any other web browser if it exists if it exists)
Google Chrome uses a different rendering engine than Internet Explorer/Firefox, so may display web pages differently. Apple Safari uses the same rendering engine as Google Chrome (WebKit) and should display pages the same way.
If your site isn't rendering properly in any browser, make sure your HTML and CSS are valid by testing them at http://validator.w3.org/.
If your site doesn't render properly in Google Chrome or Apple Safari, file a bug at webkit.org as described at http://webkit.org/quality/reporting.html.
If your site renders properly in Apple Safari but not in Google Chrome, please file a bug against Google Chrome at http://code.google.com/p/chromium/issues/list.
How can I test my website in Google Chrome?
There are several tools to help you test your website in Google Chrome:
Web Inspector
Right-click on any component on a web page to launch the web inspector. You'll be able to see the elements and resources associated with the component on which you clicked, including a hierarchy view of the DOM and a JavaScript console.
Task Manager
Select the Page menu icon, then Developer > Task Manager (or press Shift+Esc). The task manager shows all running Google Chrome processes, and the resources that they're using (memory, CPU, and network).
JavaScript Debugger
Select the Page menu icon, then Developer > Debug JavaScript. This launches a JavaScript debugger that can be used to attach to existing processes.
I found the Answer. Being that I am using drupal, there is a built in IE fix for the theme that I am using (fusion) that creates separate css files (ie7.css, ie8.css, etc). using these, I can adjust what I need for IE specifically.
Most layout problems with decent browsers are cause by invalid HTML, invalid CSS, or misunderstanding what a particular piece of CSS is actually supposed to do.
In general, when I see a difference between FF and Chrome, it is because Chrome is doing the proper thing and FF just happens to be rendering some invalid CSS fine. 99% of the time, I can fix the CSS and get FF and Chrome to render the same.
The remaining times, I typically browser sniff and use jQuery to fix the problem.
I hate Firefox, I really do, but as a web developer I'm chained to it b/c of the robust set of tools that Firebug offers. Recently Chrome and Safari's inspection tools allowed users to edit full chunks structural code (in a very buggy manner), but you still can't edit full stylesheets. Usually when someone brings this up, Chrome and Safari developers say "BUT YOU CAN EDIT CSS," and that's true, to an extent. You can edit CSS property-by-property (which takes forever if you have a lot of changes) in both browsers, but there is no way to see the full computed stylesheet, make edits within it, and immediately see the results. To date, only a full install of Firebug on Firefox allows you to do this.
Has there been any momentum in either of the Chrome or Safari camps to build a plugin to match this unparalleled function? Cheap plugins that allow you to insert CSS into the page are not the answer. It's really simple:
Have a list with the current stylesheets that are being referenced
Choose the one you want to edit, and click an edit button
See all the code in the stylesheet
Make changes and see them reflected on the page immediately
Is it really that hard to build something that does this? I think it must be, b/c why else would the developer communities of two browsers completely ignore it? If there's something out there that now offers this capability, I'd love to hear it; otherwise, maybe someone will step up to the plate and develop it for either Chrome or Safari. It seems like the guys who developed the CSS Edit app would be all over this.
Thanks to you I found it!
The Live Stylesheets extension for Chrome is what you are looking for. Be sure to restart Chrome after installation to use it.
You can edit external stylesheets in Chrome DevTools, too (since Chrome 15 or so). Just double-click the stylesheet contents in the Resources panel (or click the "Edit" button below), edit, Ctrl-S to commit a new revision, Esc to cancel editing. And it updates your page as you type!
You can edit your CSS files directly on Chrome without relying on any extension.
Here is how: Edit CSS files on the fly using Chrome DevTools
A different way to access it:
right click the page, select inspect
on the DevTools, click on "Sources"
locate the css on the "Network" pane and click it
change the css and save it ( by pressing ctrl+s )