Safari Web Inspector - add class to dom element

I just noticed in the Safari inspector that when I double-click the class of a DOM element and add an additional and already-existing class, the existing rule does not apply. And of course, refreshing wipes all changes. Is there anything I am missing, that allows you to refresh the styles without doing a page reload?
I work in an enterprise environment where changes must be committed to SVN, then checked out on a QA box, and finally compiled into the Java app before I can see changes. Therefore, it is vital that I am able to make changes in the inspector for a visual check before going through the 10-12 minute process of updating a css rule or adding a class to an element.
And for those who offer the advice of using Chrome, I generally do. But the Safari inspector is necessary for developing for Safari in IOS.
Thank you for any help.

Since this is the community for troubleshooting Safari for OS X, post your topic in the > Developer Forums: Apple Support Communities instead.

Similar Messages

Safari Web Inspector on Mavericks

Dear Apple communities
I've had a problem with Safari Web Inspector since version 10.9.0 and now upgraded into 10.9.1 but the problem still persists
the Web Inspector always freezing, can't scroll the inspector window, and the Inspector window sometimes greyed out (screenshot added)
how to fix this problem ?
any helps are appreciated
thank you
screenshot

I am using jQuery and calling my javascript using $(document).ready(). When, on the same page, I call my JS using window.onload, the errors show up like I would expect. I hope I have got something else wrong, because this would seem to discourage writing unobtrusive javascript.

Safari Web Inspector Syntax Colors

Does anyone out there have the syntax color palate that the Safari Web Inspector uses? I know it's neurotic but I'm wanting to setup my BBEdit code colors the same and zooming in or taking screen shots into Photoshop produces pretty sad results as do Google searches. Again, I know it's OCD but I'm a developer, right? Thanks in advance.

https://bugs.webkit.org/show_bug.cgi?id=13516
It's not a high priority bug however, so don't get your hopes up
Make sure to send your feedback as well.

Safari web inspector -- show colors as hex-value codes?

Is it possible to set the Safari web inspector so that it shows color codes as hex values (e.g., #e5e5e5) instead of rgb values (229,229,229)? I haven't found anything in the menus, but perhaps there's a variable somewhere that can be set through the command line?

https://bugs.webkit.org/show_bug.cgi?id=13516
It's not a high priority bug however, so don't get your hopes up
Make sure to send your feedback as well.

New safari web inspector terrible and unresponsive...

Has anyone else noticed how bad the new web inspector is for Safari. Before they changed it, it worked exactly like Google Chromes tools. But of course they have tried to make it more feature rich and have ruined it as a result.
Is there any way of reverting it or will Apple developers listen up? As a designer/developer I dont wish to have to do all my styling changes and testing in Chrome or set Chrome as my default browser. But something tells me I might have to Safari's tools don't improve.
First off, you can inspect an item, but when you continue to look at other items on the page or refresh the page and re-check elements the html code view either switches to DOM mode or just shows blank, therefore leaving nothing to click on and inspect.
Secondly, it doesnt remember the display settings I wish to use from a previous session. So I have to close the extra navigation inspector and then select styling from the right hand inspector window. Its driving me mad.
Maybe there is a firebug extension I can add in and use instead. Apple get a grip, this is a terrible inspector... on par with the more recent changes to Firefox's inspector.

Where to send product feedback to Apple:
http://www.apple.com/feedback/

Safari Web Inspector console clears on refresh

Sometimes the console on Safari's Web Inspector doesn't show me javascript errors. This makes debugging a page harder (e.g., I think a page is free of JS errors, when really Safari just isn't showing them to me).
This is how I expect it to work: I load a page and open the Web Inspector. It shows me any JS errors. If I reload the page, the Inspector also reloads and shows me the JS errors. Often it does work this way.
Sometimes, though, one some pages, when I reload the page, the Inspector clears and reloads like above, but the JS errors don't show up in the console (I do get a red indicator next to the JS file with the number of errors). If I close the inspector and reopen it, the errors then show up.
I have tried restarting Safari, restarting my computer, and reinstalling Safari. This is Safari Version 3.2.1 (5525.27.1).

I am using jQuery and calling my javascript using $(document).ready(). When, on the same page, I call my JS using window.onload, the errors show up like I would expect. I hope I have got something else wrong, because this would seem to discourage writing unobtrusive javascript.

Viewing POST data in Safari web inspector

Is this the place to ask questions about the web inspector? Ive had a look around but can't find a developer forum..
Anyhow, the Firebug extension for Firefox usefully shows the POST data (and other parameters) when I'm debugging my scripts.. (see image) - Its shows me all the info I need - headers, post, response and html
Where can I see this information in webkit's web inspector?
Thanks

I can't believe this passed QA. It can't be intentional. The absense of the ability to view POST traffic renders the whole network utility next to useless. I've had to resolve to using Chrome for my POST peaking needs. This needs to be voiced, people. Please let Apple know what you think about this amputation stunt: http://www.apple.com/feedback/safari.html

Safari web inspector disappeared

Hi to everyone,
I've a Macbok pro 15" buyed in september 2011; few days ago, Safari's web inspector has disappeared. Today I've updated the software to version 5.17 and web inspector is already not present. What happens? I've uninstalled Garageband recently and I use Clean My Mac to clear os cache and other useless stuff (I've been using it from a long time ago and nothing like this has ever happened).
Thanks in advance to all.
Marco

Solved! I've just buyed a new mac book pro and I did not remember that web developement tool is not enable by default. Bye

Can I tell Safari Web Inspector Console to clear on page reload?

Is there any way to get rid of or at leas hide the previous console output when I reload the page?
Currently Safari just puts a very faint dotted line between the various reloads' output, and it's occasionaly hard to tell if I've fixed the probem or not.
Safari Version 7.0 (9537.71)

e.g. here is the difference between "You still have an error to fix"
and "You just fixed that error"
blown up 2x, so it is a little easier to notice the difference than in practice
There is a tiny trashcan icon to clear the console, but it is very tiny and occasionally isn't even there, I have to click away from the console and click back to see it.
Message was edited by: dwightk

Why the Safari web inspector shows it takes 16229 days to load some resources?

As chrome shows everything right, safari always show some resources take 16229.0 days to download, and the resource is actually downloaded in a few ms.
It happens to every sites(I guess) and every resources randomly.
All extension is disabled and I just reset safari, but nothing changes.

Safari also takes a long time(more than 10s) to load a page sometimes while Chrome just load it instantly. I think this happens when it shows to take 16229 days to load resources

In web inspector, CSS right tab doesn't show line numbers anymore ?

I can't see the number lines of the CSS stylesheet anymore using the line inspector.
Anyone knows how to put in back ?

Apple has made it so you can only use Safari Web Inspector.
File feedback as to how it has limited you.
The information you are looking for (if I remember correctly). is hidden. you need to hover your cursor over where the information usually is and there should be an icon of a circle with an arrow in it... if you hover over that, it'll show you the content you are looking for.
Having said that Apple is always making changes so if you were to file feedback on why this does not work for you, Apple may change it to work better for debugging websites.
http://www.apple.com/feedback/macosx.html
I already filed feedback about this. I state that when I inspect and element I want to be able to see the CSS file and line row it starts at without having to hover my cursor over an icon to reveal it.
I hope this helps.

Web inspector keyboard shortcuts

Hi all, I really like the Safari web inspector but I can't seem to find keyboard shortcuts for the main things I need it for.
• Inspect element
• Then, once you have inspected an element and you want to inspect another you need to click on the little magnifying glass
Maybe I could create these in system preferences or something? I'm sure I did something along those lines before...
Any thoughts will be welcome!
Thanks

HI,
I use right or control click. I've yet to find a keyboard shortcut.
Try Google....
Carolyn

Web Inspector

Does anyone know how to access the Safari App on the computer to use Web Inspector?

Yes there is, but it does not work standalone. You must tether (with a physical cable) the iPad to a computer running Safari.
http://www.pixelparlour.co.uk/2013/01/mobile-safari-web-inspector/

Inspecting element on Safari 7 does not show Web Inspector

When I run "Inspect Element" on Safari 7, nothing happens. I don't see the Web Inspector and the page appears to lag a little bit. I am running Mavericks 10.9.2 and Safari 7.0.3.

Please read this whole message before doing anything.
This procedure is a test, not a solution. Don’t be disappointed when you find that nothing has changed after you complete it.
Step 1
The purpose of this step is to determine whether the problem is localized to your user account.
Enable guest logins* and log in as Guest. Don't use the Safari-only “Guest User” login created by “Find My Mac.”
While logged in as Guest, you won’t have access to any of your personal files or settings. Applications will behave as if you were running them for the first time. Don’t be alarmed by this; it’s normal. If you need any passwords or other personal data in order to complete the test, memorize, print, or write them down before you begin.
Test while logged in as Guest. Same problem?
After testing, log out of the guest account and, in your own account, disable it if you wish. Any files you created in the guest account will be deleted automatically when you log out of it.
*Note: If you’ve activated “Find My Mac” or FileVault, then you can’t enable the Guest account. The “Guest User” login created by “Find My Mac” is not the same. Create a new account in which to test, and delete it, including its home folder, after testing.
Step 2
The purpose of this step is to determine whether the problem is caused by third-party system modifications that load automatically at startup or login, by a peripheral device, by a font conflict, or by corruption of the file system or of certain system caches.
Disconnect all wired peripherals except those needed for the test, and remove all aftermarket expansion cards, if applicable. Start up in safe mode and log in to the account with the problem. You must hold down the shift key twice: once when you turn on the computer, and again when you log in.
Note: If FileVault is enabled, or if a firmware password is set, or if the startup volume is a Fusion Drive or a software RAID, you can’t do this. Ask for further instructions.
Safe mode is much slower to start up and run than normal, with limited graphics performance, and some things won’t work at all, including sound output and Wi-Fi on certain models. The next normal startup may also be somewhat slow.
The login screen appears even if you usually log in automatically. You must know your login password in order to log in. If you’ve forgotten the password, you will need to reset it before you begin.
Test while in safe mode. Same problem?
After testing, restart as usual (not in safe mode) and verify that you still have the problem. Post the results of Steps 1 and 2.

Developer: web inspector how do I add new css rules

I have been using web inspector for quite some time. It was a regular part of my development workflow, however, I was surprised when the safari team totally re-vamped the tool in safari 6.
You use to be able to click on the menu in the styling section of the tool bar and click "Add new rule". Now it appears you can no longer add css rules in this way. Which is a bummer because I used this feature all the time.
You also, use to be able to double click for a new rule when in the actual stylesheet under the Resources tab. I can no longer do this either. For the life of me, I can't figure out why the safari team would get rid of these valuable options.
Someone please help.
These options must still exist, as they are invaluable when working with css in the browser. Does anyone know how to add a new style rule. I read the documentation and I don't see anything about removing this functionality.
The only way I can find to add a new rule, is through the snippet bar, which is kind of a pain as you have to add the <style> tags every time you add a new rule.
Also, I can't figure out how to view and elements pseudo classes (i.e. :hover , :checked, etc).
I have to say, it is a little frustrating as I don't clearly see the benefits of their redesign and it just seems harder to use. It kind of feels like they reskinned and rearranged things just to make it look new and didn't really think through how developers use this tool.
Does anyone else feel this way with the new safari?
Maybe I will see the light after a couple of days. I hope so because I am partial to using safari.

Build your FGLayout prototype page so it works well in all screen sizes (mobile first, then tablet, finally desktop). To create your home page, SaveAs index.html. Then SaveAs page2.html, replace content. Repeat for other site pages.
Nancy O.

Safari Web Inspector - add class to dom element

Similar Messages

Maybe you are looking for