I am working on a Javascript Based site, which uses the Dojo Framework.
I am using a DataPicker. I wish to change the background color of the datePicker, and hence I wish to look at where in the CSS is the color being set, so that I can override it in my CSS.
Usually I use FireBug and 'Inspect Element in FireBug' to view the HTML and CSS together. (or even Google Chrome's developer tools)
However this datepicker is a dynamically created component, and If I right click, or move my mouse into the Firebug window, the date picker is shutdown/destroyed. (You can check out the sample on the linked page itself)
Is there a way to inspect the CSS on these kinds of dynamic elements, using Firebug, or something else?
The best approach I've found for the dijit popup widgets is (using chrome)
Open the popup (in this case the date picker)
Right click on the element
Select "Inspect Element" from context menu
Chrome will open and transfer focus to the developer tools without blurring the focus of the page, keeping the popup open, allowing you to modify attributes and css rules and getting instant feedback.
Related
I’m working on an application that allows you to enter an automatic date. To test this application, I must follow a scenario that allows to select a specific date (e.g: 15/12/2021) by clicking on it.
For this I use a datepicker from the bootstrap library.
datepicker
But it is impossible to inspect this element, because, once displayed, it disappears with the slightest mouse click in the window, so that when I right-click on the datepicker to inspect it I lose the focus on the element that disappears.
Here's the inspector (when I want to open the div, the datepicker disappears):
inspector HTML code
How could I inspect this datepicker to create selectors?
Best regards
Use Chrome:
1. Right click Inspect
2. Go to Elements tab
3. Click on datepicker element (and watch what element is highlighted in the Elements tab)
4.Right click on that element in Elements tab and select Brake on - one of the options should work
5. Click on that datepicke element and Debugger should start
6. Click on Play until Your element is loaded
7. Inspect
For example:
Go to google.com
To inspect google apps selection:
1. Inspect page and switch to Elements tab
2. After clicking App selection button you will see that class="fade-in" is highlighted
3. Right click on this element in Elements tab and select Brake on - > attribute modification
4. Click on App selection again and You will see debugger appear
https://ibb.co/D7V3P3C
5. Click on Resume script execution but in the Inspector (Red bounding box on the pic) not on Debugger in main screen, until App selection is not showed
6. Then You can inspect Apps as You wish
You could also use EventListeners to set break on them.
I am working with IE11. After loading my website elements like checkbox, radio button, drop down arrow get automatically hidden then after hover on them they get visible then after click anywhere in page they again get hide. All this element are present and style are applied tested with developer tool but still they was giving problem. Then after check "use software rendering instead of gpu rendering" option from settings->Internet option->Advanced->"use software rendering instead of gpu rendering" everything got ok. Now my website element not getting hide all style applied perfectly. But I doesn't understand why this happen? How this setting fixed issues. Please any idea help!
Using the context menu inside internet explorer allows you to inspect the element to see styles etc attached to a html element.
Is there anyway that you enable this functionality inside the webbrowser control?
(I am guessing it is not included to make it lighter, if so is there an alternative?)
It is not my intention to make this available to the client but it would certainly help when debugging the pages sent to the control in my winform application.
As no one seemed to bite on this question I have settled with using the following solution.
https://getfirebug.com/firebuglite#Stable
Using the instructions on this page I was able to press F12 on the webbrowser control to show a "Lite" version of Firebug, this allows me to happily inspect the elements.
When I change text using JavaScript The text does not appear in the HTML "View source". Is it possible to inject information to the HTML "View source". (When I write View source I mean to While you pressing on the right mouse button in the browser you can view the source code That returns from the server)
View Source shows you only the HTML it received from the server's response. Your JS changes happen afterward.
Firebug and Chrome's debugger show you the source dynamically so you can see the DOM and HTML as it has been changed. But view source will only ever show you what the browser received from the server.
Well,
You have said it right. When you "View source" you see what was received from the server, and elements that you added dynamically using javascript do not exist there.
If you want to see elements which you added later, you can do that using Inspect element (CTRL + SHIFT + I), which will show you current html structure displayed in browser.
When you "view source" in a browser, it is opening a window and printing the source code to the current page. This text is totally static, nothing will change its contents besides manually refreshing.
If you want the HTML source you are looking at to reflect changes you make to the page, you need to use your browsers Dev Tools. Try Right Click->Inspect Element instead of Right Click->View Source
Some techniques:
In some browsers Ctrl-A to select the whole rendered page content
and, with a right click View Source of selection, gives the source as generated by
rendering scripts. (often <script> elements are gone and replaced
by the rendered content)
Augment the address bar URI by prepending view-source: to get the
original source.
Use the menu bar or right click View Source interfaces.
With these techniques and FF it is possible to get different sources for a "static" page in the rendering chronology.
Technique #1 is interesting when automated ... along the lines of:
generate a page that displays the time in seconds,
select whole page,
render the source view of the selection
repeat periodically
quasi code:
setInterval ( write Date() to page, select all, write view source of selection to page ) every second
I'm converting a Sharepoint 2007 installation to Sharepoint 2010. In 2010 each Web Part has an arrow in right side of the menu bar that only displays on mouse hover. How can I make that arrow always display? I've tried adding this to my custom CSS:
.ms-WPHeaderMenuImg{
visibility:visible !important;
}
The visibility set by corev4.css is hidden, but when I change it to visible in my CSS I still only see the image on mouse hover. Is there some JavaScript that is controlling this action? If so, where is it and can I override it? If not, how is this arrow showing and hiding?
You should check your priority of CSS imports and make sure your custom CSS is actually being applied because the code you have is correct. I was able to verify that on a standard page, adding a webpart did not show the drop-down arrow. When I then added in your code (and actually I didn't need the !important) then the arrows were shown by default. There was no JavaScript getting in the way, it was all controlled by CSS. So the problem may be somewhere else in your code.
One thing to be aware of is that there are two ways to display webparts: with the checkbox to the right of the arrow and without. That means that the arrows will not line up vertically on the page if you have them visible by default. This may be why Microsoft chose to hide them (although it also looks cleaner in the 2010 way).