Does anyone know if there is a way to use the "scroll to text fragment" feature in a link (e.g. "http://url.com/page/#:~:text=highlight%20this") in addition to another hash action in the same link?
I have a page with tabs (its a divi tabs module in wordpress) and when clicking link on another page coming to this page I would like to open a tab (can be done with "http://url.com/page/#tab|2") and also highlight text within that tab.
Does anyone know how to do this?
If I first go to "http://url.com/page/#tab|2" (opens the tab) then append "#:~:text=highlight%20this" or "&:~:text=highlight%20this" to the end of the url, it achieves the desired affect. But it does not when going directly to "http://url.com/page/#tab|2#:~:text=highlight%20this" (it just redirects back to "http://url.com/page/#tab|2")
Any ideas would be appreciated.
I'm on Chrome Version 41.0.2272.101 m (newest), and this update is messed up. They put it, when you have inspector open, that any DOM change will flash with purple on the changed element (like in Firefox), but now I cannot inspect any hovered object (also like in FF, which is why I don't like to use it when doing front end developing).
I'm talking about js triggered events, like superfish for instance. Before, I could hover the menu, and cover the menu with the inspector, and the menu would stay opened, and I could go in the inspector see what pseudoelements are created, change the paddings and such directly, and see the change. Now, when I hover the menu, and right click to inspect it, the menu closes, and I cannot inspect it!
I tried dragging the inspector over, but nothing helped. This new 'feature' is annoying as hell. Is there a way to inspect js triggered events, without putting break points on elements (which works, but is kinda pain in the ass)?
Hover over the element with your mouse and press F8 (this will only work in Chrome) to pause the script execution. The hover state will remain in visible to you. If you're on a Mac, you may have to open system preferences and check off "Use all F1,F2,etc" check box (Or simply use fn + F8).
Sometimes it only works if you are in the Sources tab of the inspector.
*Yes, you should be in the source tab and MOST IMPORTANT is you should close all the opened tabs in the Sources tab before you press F8(win) or Fn+F8(mac). *
Depending on the menu element type, I ran into this issue with drop-down input menus. The reason it's disappearing when I inspect it, is because a blur or focusout event is always triggered on the element when I click anywhere outside the element.
One way I was able to inspect the element is to prevent these events from being triggered is by removing their event listeners:
Inspect the input element on Chrome
Go to the Event Listeners tab and remove the blur or focusout event
Once the event listeners are removed, you can open the menu and inspect it without disappearing
In Chrome, press F12 to open the developer console, then click on Settings (cogwheel icon) or press F1:
then find & check the "Emulate a focused page" option.
Update: as noted in comments, this option is now in another place. See this answer.
On Mac, you can press cmd+\ to pause the script after having opened the dropdown. You can then use shift+cmd+c to inspect elements.
Adding to "In Chrome, press F12 to open the developer console, then click on Settings (cogwheel icon) or press F1:" above;
In Chrome 86 and above you can find "Emulate a focused page" option here:
DevTools >> Elements >> "Kebab" menu (3 vertical dots by the settings cog) >> More tools >> Rendering.
Alternately: With Devtools open: Hit CTRL/CMD+SHIFT+P to open the command menu HUD, enter "emulate a fo" to narrow the search results and enter (or click) to toggle the setting.
Now, when I hover the menu, and right click to inspect it, the menu
closes, and I cannot inspect it!
I faced the same issue and what I used was Expand recursively option on chrome dev tools:
The steps are:
Inspect the dropdown field
Find the dynamic DOM (the purple highlight)
Right-mouse click on that dynamic DOM
Choose Expand recursively:
We can see all elements are there
Here is a demo:
In Firefox
In Inspector, right click on a node that contains the dropdown, select:
Break on... > Subtree modification
This will pause execution the moment dropdown is... well... dropped down.
Only way that would work for me was doing setTimeout(() => { debugger }, 3000) in the console and opening the dropdown while timeout was running.
Pressing pause button in dev tools UI or F8 key to pause script execution would both close the menu.
I just used emulate a focused page and it worked like a charm
go to settings
go to more tools
find Rendering
find "emulate a focused page" and click the radio button
voala now you can inspect your select element
You can set an interval that writes out the content of a given element in the JS console every second. Drop this in the console and open the dropdown.
setInterval(() =>
console.log(document.querySelector('.Select-menu-outer').outerHTML),
1000)
None of the above referred remedies worked for me.
As our drop down (React based) will close on any single click (right or left)
So we found out the below workaround:
In Chrome Open developer tools
first click on the drop-down in collapsed state & let it expand with options
then under the element section, right-click on the div node (make sure not to left click before right clicking), which contains details of the drop-down items
Then select option 'Expand Recursively'
Then required details were shown
I think you can use the CSS Editor in Chrome to apply a state, for instance, the state of 'hover'.
In the Developer Tools, you select an element. On the right hand you have a square with an arrow over it. Click that and you can choose a state. For instance, pick hovered and you'll see both your window and your CSS update as if the element is being hovered right now.
On Windows, press F12 first, at the page with the menu, then point your mouse to the element menu (the menu will drop down), then press CTRL + Shift + C. Now you can inspect all the elements.
in my case i do following steps
Open developer tool or inspect page
click three dot button at top right
click on More tools -> Rendering
then check on Emulate a focused page option.
My page has a popup that becomes visible when you click on a button.
Although I can manually manipulate the fields on the popup when it is visible, when I inspect any of the fields, they're showing up "grayed out" / inactive in firebug.
This didn't used to be the case, and since it's started happening, I'm unable to use Watir to select any of the fields on the popup.
How do I get around this?
The HTML is here
I need to set the checkbox that you see near the bottom of that code in blue highlighting.
I used to select it with:
$browser.table(:id => "productSelectTable")[1][0].click
but now that all of the HTML above is showing up as grayed out when I inspect it, that doesn't work any more.
$browser.td(:class, "tableCell centerCell).hidden.click
Anyone with firefox browser can you open up this fiddle.
The issue I have is with this checkbox button I have, it requires multiple clicks to turn it off and my question is how can I stop this from happening? I know its the posistion:relative which is causing this but I need this so that every time I click on a button, it does not go to the top of the page. I just want the button to turn on and off in one click, not multiple clicks
(See comments below the question - now I know what happens to you)
Ahhh - you cannot solve this without Javascript: quick (double?) click on the TEXT ITSELF is interpreted as "select text" by the browser, and it does not send the event to the checkbox when that happens. With Javascript you can force "un-select" of the text on click.
Click "slowly" - avoiding double click text selection - and it will work (just to show the cause of the problem, no solution without Javascript or proprietary CSS).
Try adding this: Prevent text selection after double click
Maybe you should use a full Javascript Checkbox-Button solution instead of trying to accomplish it with just CSS.
I am developing a Chrome extension with browser action. I want to make some action on clicking on browser action icon (it is easy, not a problem), and show popup if user clicks on down arrow at the right side of the icon (that is a problem). So, we will receive a functionality similar to the firefox toolbarbutton from XUL. Is it possible to do such thing with Google Chrome?
Just want to make button, like that:
button
If it is pressed on the main part - it will do something, if on the right "drop-down" part - it will show quick settings page.
But I see only single button possibility.
The entire browserAction button works as a single button. There is no way to detect if a specific area was clicked. The best you can do is either have multiple extensions each having their own button for different actions or have options in the popup that the user selects with a second click.