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.
When I click Option-Q on an identifier to display the Quick-Documentation Popup instead of it showing up in a small dialog directly above the identifier it is showing in a large separate panel to the left.
This is suboptimal because the content is not where I wanted to look for it and because the new panel overlays the entire right side of the editor panel (and its contents).
Is there a Preferences setting for getting this to be a popup again?
Aha! There's a configuration menu that can be accessed by Right clicking on the top bar of the tool window. The first option Open as Popup is the one I wanted:
I am using Bootstrap v3.0.2 with bootstrap-hover-dropdown.min.js to make dropdowns visible on hover in main navigation menu.
For expanded menus I have removed href and put #. I noticed that expanded menus are not working in Safari.
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.
I've been using Chrome and am going back and forth between switching to Safari or staying with Chrome. My one small issue with Safari though is that the web inspector always shows up in a new window every time I toggle it. I press Command-Option-I and it opens in a new window and when I press Command-Option-I again it does not go away. I love the way the web inspector functions in Chrome and am wondering if there's a way to run the same way in Safari.
Any thoughts are greatly appreciated. Thanks!
I have had the issue for a long time. Here is the solution.
Right-click on a web page and select inspect element.
The console window appears in Fullscreen. Minimize the window like any Safari web page and it should a window like below.
Just above the 'Elements' tab, you should be able to see 2 icons. Clicking the icon on the left, opens the Console in right side of the browser and clicking the icon on the right, opens the Console in bottom of the browser
Hope this helps.
None of the methods upon are working for me (Safari 9.1), if you want to make the docking buttons of the inspector showing up:
open Terminal
type defaults read com.apple.Safari "__WebInspectorPageGroupLevel1__.WebKit2InspectorStartsAttached"
Once you checked if it returns 0,
do:
defaults write com.apple.Safari "__WebInspectorPageGroupLevel1__.WebKit2InspectorStartsAttached" 1
It's a bug in the Safari codebase.
Here is the bugreport and they're working on it (source)!
You could press the leftmost button at the Inspector's status bar and Inspector will dock.
UPDATE: Now, the button is on the right. When Inspector is in a separate window, the two small buttons in its upper right corner make it move to the 1) bottom of the Safari window 2) right side of the Safari window.
The only method that seemed to work for me was to resize the browser to a big enough size that it was big enough to contain the smallest size of an individual Inspect window. This for me, was widening the browser to at least around 65% percent width of the screen, and then you can "Inspect Element" and the default would be that the Inspect window would be at the bottom of the browser, and the browser with the Inspect window in it is resizable to any size now. Hope this helps some people.
Follow these steps to fix safari issue
Go to Develop --> User Agent --> Safari --> Select iphone --> then click on right side top symbol...
Select it and do inspect then you can see the button on left side top corner.
Now set to default setting by redoing the first point.
Please follow the step
Try clicking as shown:
I hope you get as shown:
I noticed when you have an open tab like the start page, the web inspector will pop up in a separate window. Also, there are no icons in the web inspector to attach it to the bottom or side. If you have a webpage open and do the same thing in the same window, that tab will have the web inspector attached to the bottom of the page (or whatever your attachment selection was prior).