One of the things I've always loved about the webkit inspector is that you can click into any selector and begin adding styles and watch them appear live.
I generally do all my debugging in Chrome, however needing to debug with the iPhone simulator I noticed the web inspector for Safari 7 doesn't behave like it used to.
The problem is that I can't seem to click into a selector to add/edit styles (like you can within the web inspector for ALL other browsers... even IE).
Am I missing something? I was not able to find an answer by searching, and the closest I found was this: How do you apply style rule in Safari Web Inspector?
Here is a screenshot of what I'm doing within Chrome:
And here is Safari 7:
I am using Safari Version 7.0.4 (9537.76.4). I believe this is the latest version.
I demonstrated it better with personal screenshots that I took while adding style rule:
Here is how the font color initially looked: #494949
For this example, I began by un-checking the initial CSS style color: #494949
I clicked right after the semicolon or ; after background: #FFF; and pressed enter. It put me on a new line as you can see in the picture below.
I entered color: #FFF; and it automatically applied it to the webpage. (You can also press enter after you are done writing the style rule.)
Here is the result:
Or you could also click the New Rule button shown below :)
I don't now is this can help you but theres is an answer about safari 6.x here
how do you apply style rule in safari web inspector
I haven't tested, i use elementary :D
in resume
First choose the {} brackets icon in the right sidebar
From the DOM model in the center white area of the web inspector- Click to select the HTML element you wish to view styles of. ( they will display in the right style sidebar )
On the right style sidebar: double click the closing brace on the existing style for the selector you wish to edit.
OR
Double click the open area beneath the "Style Attribute" drop down in that same sidebar to add your own styles to that particular element
If you need to change CSS digit value, for example you need to tune width or margin - use Alt + arrow up/down for 1px step or ALT + Shift + arrow up/down. Or you can just change the number with digits you need.
Related
I'm trying to see what default css values (possibly source code?) are for webkit psuedoelements so that I can create custom webkit items that are very similar to the default, but slightly customized.
These items are shadow elements that don't show up in the DOM. you can enable 'Show user agent shadow DOM' in chrome devtools settings, per
Inspect webkit-input-placeholder with developer tools, but i'm still not seeing elements in the DOM. I suspect the styles are being provided by user agent stylesheet for these webkit items
Load a page utilizing the CSS in question with your browser, then you can use developer features to inspect it.
Right-click the page
In Chrome, the menu choice is 'Inspect'
The screen will split, the page source appears on the bottom of your screen (not sure what happens if browsing on a phone)
On the bottom of the screen, you will see the html, on the bottom right you will see the pertinent CSS you select some html on the right.
Note there is a link to the style sheet on the far right, click to view
Unfortunately, the link is hard to read because all spaces and linefeeds have been removed, but you can paste it into an editor and make it easier to read
On this website, on Chrome, when hovering or clicking the "EXPLORE" button, I am getting a lot of weird shadowed boxes popping up in random places. What could this be from? I have inspected the elements but it doesn't seem that any of them could be causing these.
A screenshot below:
In your stylesheet, I'm seeing some box-shadows (and it looks like box-shadows, not text-shadows). And they only appear on hover so chances are, when you inspected your elements, you didn't inspect them on their hover states.
Regardless, go in to your stylesheets and search for box-shadow and set it to none.
Open your site in Firefox or Chrome
Reproduce the error
right click on the weird shadow box and select inspect this
look for a box-shadow in your inspector and disable by clicking off the checkbox
If it worked, give yourself a cookie! You're a master debugger
There's a .tooltip that's being loaded via js. There was 18 instances of it being called in the custom.js file. If you don't want it, you can just stop calling it from within this file.
Alternatively, there are 27 instances of .tooltip in your css file. You can go through an remove them or just add .tooltip {border-style: hidden;} in you html file and it should remove the border.
[EDIT]
I took a screenshot of the Chrome inspector:
You can see the element being added via js when you hover over the page down chevron. You can get rid of the tooltip altogether, or inspect the .tooltip, .fade, .top or .in css to see which one of these items is creating the offending box.
You should be able to make this stop just using css. My understanding is, if you put the css directly in the html it should trump whatever is in your css file if you don't want to change the file itself. HTH
It turns out the issue was with blur: the background was using a blur filter and this created weird shadows. I am not sure why and how this was happening, though. I removed the blur and just blurred the actual BG image in Photoshop.
It seems like I was encountering the same problem as in this question.
I want to add a new style rule directly in the Chrome developer tools, but I'm struggling to do so, from following the guide at https://developers.google.com/chrome-developer-tools/docs/elements-styles#styles_edit
This is the CSS rule I want to add - I can't set up the selector by selecting an element, I need to type it it directly. I want to do this to make sure that the CSS syntax itself is correct.
.y-axis .tick:nth-child(2):nth-last-child(1) text {
font-weight: bold;
}
I have clicked on the "plus" sign to add the rule, but when I do, I'm finding that the developer tools just won't let me add it by typing or pasting it in - it either goes gray, or it pastes in like this, with the brackets wrong:
Then when I press Enter or tab out, or try to edit the rule, the text just vanishes. Very frustrating.
How can I add new CSS rules in the developer tools that aren't amenable to being set up via inspecting an element?
Apologies if this is the wrong forum for this question.
For it not to go gray, you need to select an element to which the rules DOES apply.
You are not showing your code, but that rule will only apply to a second child of .tick which is ALSO the last child. If the element you clicked to create that rule does NOT meet those selectors, it will go gray, and BELOW the other rules for the element itself.
Current versions of Chrome will won't move it or hide it until you select another element, so this is probably an old issue, but for others experiencing similar issues: "The rule must apply to the selected element". But since you can't touch the pseudo element until you add content:"" to it, you'll have to create the rule, add content property to it, then touch the pseudo element, and then it will not be dimmed anymore.
Again, current Chrome allows you edit it even when dimmed.
First, select some element and add a new CSS rule as described in the Chrome documentation:
Click the New Style Rule icon located in the upper-right corner of the styles editor. A new rule with an automatically suggested selector appears.
Then, click the inspector-stylesheet:1 link in the top-right corner of the newly added rule box and edit the rule in the Sources tab of the Developer Tools.
I've been experiencing a strange issue.
I've made these buttons using div tags, they have rounded edges and the color of their borders is defined in CSS. To make them point to somewhere I surrounded them with <a> tags. The problem is, when the link points to something previously visited, the divs border turns white. Normally, I'd just inspect the element in Chrome to see which CSS rule does that but as soon as I navigate to that element, the border fixes itself to the color it's supposed to be.
This happens in Chrome but not in IE or Firefox.
Also, I'm using Joomla 1.5 and Artisteer to make the template (although I did modify it a lot).
As a temporary solution I used onclick JavaScript linkage to make the button work but I don't think that would go too well with search engine crawlers.
Do you have any ideas what could be wrong?
In chrome developer tool you have options to view elements on hover etc. If you haven't assigned styles for a:active, a:visited etc you should. If you'd like more help please post your code into jsfiddle
I have a site where the background-image jumps up on hover state and I can't for the life of me find the specific css that does this.
I'm able to get to the "offending" link and give it a border and change the padding and margin. The problem is that firebug and chrome inspect does not show me what happens on the hover state.
So I want a way to see what additions to the normal css state happens on :hover.
Any pointers?
(P.S. IE 8 doesn't have this issue - ie no jumping of background image)
Try using the Inspect function in FireBug to focus in on the element in question. It will show you all related CSS, including any CSS that is related to :hover. You can also see in this way what changes happen to the elements CSS (and any other DOM attribute) when you hover your mouse.
In case the changes are coming from some JavaScript, try out the Visual Event bookmarklet. Activating it on the page will let you see all events that are tied to the element in question.