In one of my PCs when I use inspect tool in chrome, I can't select some part of a property or a value, so I have to retype all the value again. As many times as I click on the selected text, the caret doesn't go to the place I need and the selected text doesn't deselect.
the following picture shows what I want and what happens.
There is no problem in another PC.
Both are windows 10 64bit and google chrome 62.
Try holding shift or control while clicking. Haven't tried it, but it may work. My guess is that it's simply a UX workflow that DevTools doesn't handle well.
Related
As per usual when making automated tests I use "Inspect"(CTRL+SHIFT+I) in Chrome to find element by xpath, id, CSS selector etc.
For example:
//li/a[contains(text(), "Products")]
Above is an xpath from this page. In previous versions of Chrome in "DevTools"/"Elements" after pressing CTRL+F to open the "Find" option and pasting this xpath element is highlighted in DevTools window. In new version of chrome it is not highlighted, the usual "1/1" results is displayed in far right of the "Find" tab.
I've search the internet and Chrome Settings but to no avail.The yellow highlight is time saver and I know for certain that I am using the right element.
Edit: Fixed with Chrome version 84.0.4147.105
Thank you for updates, suggestions, workarounds etc.
Yes, In recent updates of Chrome 84, Find feature is buggy. 3 issues have been reported and those are in unconfirmed status as of now (while writing this answer). You can follow them on below links for more details -
An element in the elements tab is not highlighted if it is only one in the DOM
"Find" feature not working on "Elements" tab
Finding element/xpath wont direct to the object
Update
Elements search does not resolveNode (highlight text, etc) on first search result
Has been fixed and it is part of Version 84.0.4147.105 (Official Build) (64-bit). You just need to update and relaunch the chrome. The issues mentioned above are marked as duplicate to this issue.
The major issue is with DevTools within Google Chrome 84.0 which doesn't highlights the first matched element.
Incase, the locator finds a single match, the search result does show 1 of 1 but the WebElement is not highlighted within the DOM Tree
As an example, the Search Box within the Google Home Page can be identified uniquely using the css-selector:
[name='q']
or using the xpath:
//*[#name='q']
But google-chrome-devtools within Google Chrome 84.0, does finds the element and shows 1 of 1 but the element is not highlighted.
However, if there are multiple element matching to the Locator Strategy, leaving out the first matched element, the other elements are highlighted.
Bug in Chrome 84
This issue was raised in the Platform>DevTools queue through Issue 1108311: The first matched element in the Elements panel is not getting highlighted as per the cssSelector and had been merged into Issue 1103316: Elements search does not resolveNode (highlight text, etc) on first search result where we are actively tracking the issue.
Solution
As per #bugdroid the main issue was caused because a check to ensure the search results were valid did not account for the case where the index was 0, so all highlight results of index 0 (index 1 to the user) were no longer highlighted.
The fix for this issue is Merge-Approved in:
Chrome version 84.0 later then Version 84.0.4147.89.
Chrome version 85.0.
Chrome Canary version 86.0.4201.0.
Alternate Solution
For alternate solutions using the current google-chrome Version 84.0.4147.89 you can find a detailed discussion in Why XPath does not highlighted the yellow mark in Chrome84?
Also as a workaround you can try using chro path extension, where you can paste your written xpath in search box and see element getting highlighted in browser.
Additionally you will be able to get automatic locators formed by chropath itself
I have also faced a similar issue where first matched xpath is not visible in chrome ( mac os mojave).
As a workaround, I am using the chrome console for exactly locating the xpath element.
Steps :
Open developer tools
Click on Console tab
type command as : $x("xpath") and press enter.
Find the below image link for reference.
dev console
Another option is to go to console section and evaluate your xpath like this $x("yourXpath") and hit enter. In the case of google search button woulb be like this: $x("//*[#name='q']") then you hit enter and expand the structure that appears below and if you hover with the mouse, the element is going to be highlighted.
I had the same issue, but the thing is .....
you should after you position your cursor to a particular text or control or button(etc) that you wish to inspect, then right click and choose Inspect element, then in the area where you see the code...I mean in Element tab of the opened DevTools, keeping your cursor on the text of the code at any place, then click Ctrl+F and it will open a search field
and then you type an absolute or relative xpath of your element that you would like to find and when the path is correct, your text will be highlighted with yellow.
Surprisingly, if I just move my cursor out of element tab and still do Ctrl+F, the search field will open, but the element is not highlighted in yellow as before
I had started using firefox!
It is being fixed by chromium - https://bugs.chromium.org/p/chromium/issues/detail?id=1103316.
Should be out soon.
As per usual when making automated tests I use "Inspect"(CTRL+SHIFT+I) in Chrome to find element by xpath, id, CSS selector etc.
For example:
//li/a[contains(text(), "Products")]
Above is an xpath from this page. In previous versions of Chrome in "DevTools"/"Elements" after pressing CTRL+F to open the "Find" option and pasting this xpath element is highlighted in DevTools window. In new version of chrome it is not highlighted, the usual "1/1" results is displayed in far right of the "Find" tab.
I've search the internet and Chrome Settings but to no avail.The yellow highlight is time saver and I know for certain that I am using the right element.
Edit: Fixed with Chrome version 84.0.4147.105
Thank you for updates, suggestions, workarounds etc.
Yes, In recent updates of Chrome 84, Find feature is buggy. 3 issues have been reported and those are in unconfirmed status as of now (while writing this answer). You can follow them on below links for more details -
An element in the elements tab is not highlighted if it is only one in the DOM
"Find" feature not working on "Elements" tab
Finding element/xpath wont direct to the object
Update
Elements search does not resolveNode (highlight text, etc) on first search result
Has been fixed and it is part of Version 84.0.4147.105 (Official Build) (64-bit). You just need to update and relaunch the chrome. The issues mentioned above are marked as duplicate to this issue.
The major issue is with DevTools within Google Chrome 84.0 which doesn't highlights the first matched element.
Incase, the locator finds a single match, the search result does show 1 of 1 but the WebElement is not highlighted within the DOM Tree
As an example, the Search Box within the Google Home Page can be identified uniquely using the css-selector:
[name='q']
or using the xpath:
//*[#name='q']
But google-chrome-devtools within Google Chrome 84.0, does finds the element and shows 1 of 1 but the element is not highlighted.
However, if there are multiple element matching to the Locator Strategy, leaving out the first matched element, the other elements are highlighted.
Bug in Chrome 84
This issue was raised in the Platform>DevTools queue through Issue 1108311: The first matched element in the Elements panel is not getting highlighted as per the cssSelector and had been merged into Issue 1103316: Elements search does not resolveNode (highlight text, etc) on first search result where we are actively tracking the issue.
Solution
As per #bugdroid the main issue was caused because a check to ensure the search results were valid did not account for the case where the index was 0, so all highlight results of index 0 (index 1 to the user) were no longer highlighted.
The fix for this issue is Merge-Approved in:
Chrome version 84.0 later then Version 84.0.4147.89.
Chrome version 85.0.
Chrome Canary version 86.0.4201.0.
Alternate Solution
For alternate solutions using the current google-chrome Version 84.0.4147.89 you can find a detailed discussion in Why XPath does not highlighted the yellow mark in Chrome84?
Also as a workaround you can try using chro path extension, where you can paste your written xpath in search box and see element getting highlighted in browser.
Additionally you will be able to get automatic locators formed by chropath itself
I have also faced a similar issue where first matched xpath is not visible in chrome ( mac os mojave).
As a workaround, I am using the chrome console for exactly locating the xpath element.
Steps :
Open developer tools
Click on Console tab
type command as : $x("xpath") and press enter.
Find the below image link for reference.
dev console
Another option is to go to console section and evaluate your xpath like this $x("yourXpath") and hit enter. In the case of google search button woulb be like this: $x("//*[#name='q']") then you hit enter and expand the structure that appears below and if you hover with the mouse, the element is going to be highlighted.
I had the same issue, but the thing is .....
you should after you position your cursor to a particular text or control or button(etc) that you wish to inspect, then right click and choose Inspect element, then in the area where you see the code...I mean in Element tab of the opened DevTools, keeping your cursor on the text of the code at any place, then click Ctrl+F and it will open a search field
and then you type an absolute or relative xpath of your element that you would like to find and when the path is correct, your text will be highlighted with yellow.
Surprisingly, if I just move my cursor out of element tab and still do Ctrl+F, the search field will open, but the element is not highlighted in yellow as before
I had started using firefox!
It is being fixed by chromium - https://bugs.chromium.org/p/chromium/issues/detail?id=1103316.
Should be out soon.
So I'm trying to develop a webapplication and I'm trying to check it out on mobile.
I'm currently using Cordova and JQuery Mobile together with ripple.js to view my application in my browser.
The first issue (as far as I know) is that ripple.js will work best in Google Chrome, so this is my only test platform.
The second issue is that when I toggle Device Mode on, it doesn't show me the black dot (cursor) when I enter the rendered version.
I'll explain my situation or a scenario:
As an example I'll go to http://google.com
I press F12 to enter developer mode
I click the Toggle Device Mode button
I will see my cursor, until I enter the generated mobile canvas. While I would normally see a black transparant dot, I now see nothing.
I can however click and drag like I would normally do, but I can't see what I'm doing.
The things I already tried:
Reset all the flags back to default
Reset all developer tool settings to default
(edit) Installed a previous version of Chrome AND Chromium
So question is, how do I get my cursor back?
Extra: I'm using version 49.0.2623.87 m, but that's not related since my co-worker, has the same version and he sees the cursor.
(edit) currently I'm using the mouse option where I press Ctrl to see the circle which indicates where my cursor is, but this really has to be a temp solution.
(edit) I fixed it by doing a combination of things. So I'm not sure which exact thing fixed it. I removed a few programs that I installed after it still worked. I uninstalled about 4 of them. Also I did an update of my graphics card and then did a reboot. So it could be either the graphics card update, the software uninstall and/or the reboot.
I had the same issue. (note this question might be a duplicate of this one)
Following the advice on the Chrome forum here I changed the Quantization Range in my Intel HD Graphics Control Panel from "Default Range" to "Full Range". The touch pointer (grey circle) appeared immediately.
If that doesn't help you may have to change refresh rate too. Changing from 59p Hz to 60p Hz or some other refresh rate might help.
This should also help.
Open the mouse control panel.
Select the Pointer Options tab in the Mouse Properties window.
Then enable Display pointer trails option.
In case you don't like or are getting annoyed, like me, due to the trailer. Move the slider to the Short position and the trailer becomes near to non-existent or invisible.
I fixed it myself, yet I'm not exactly sure how I did it. I edited my original post and added the solution in the last paragraph.
Had the same on my Asus laptop with Chrome 66
Resolution that worked for me
Graphics Control Panel > Display > General Settings > Scaling > Change to Scale full screen.
OFF your Asus Eye Care Switcher.
I am posting this as answer because above mentioned answer didn't work for me but I had this issue when I had a monitor attached to my laptop, for development work. I played around with my display settings and discovered that IF the scale on my second monitor did not match the scale on my laptop, the mobile development mode cursor would disappear. (windows 10)
If this is an issue for anyone just go into Display settings -> Display -> Scale and Layout --> make sure that both your laptop/desktop matches the display scale of your second monitor.
Hope this will help.
I want to switch tabs with the Ctrl+Page Up/Down shortcuts on Chrome (using the latest version). It always works correctly when I use the left Ctrl button, but with the right Ctrl button, it only works properly on some days. When it doesn't, it becomes page up/down instead of correctly being next/previous tab. I usually browse tabs for the same few sites, so I don't think it's due to the websites. I'm not sure what causes this. Is this supposed to be happening? How can I make the shortcut always work when using right Ctrl?
Edit: Found that it's basically any "ctrl+" shortcuts and not just next/previous tab. Also, I changed my keyboard recently, but this problem has existed since my old keyboard which I've used for 4 or more years, over at least two different computers, and Chrome is the only browser I use so I don't know if this problem will still exist if I switch browsers.
Your right ctrl button is not working properly (hardware problem). Maybe it's damaged or somewhat.
Some pages maybe does not alove that shortcut's. I'm saying this because i found that on some pages, and my shortcut's doesn't work on them.
I don't see other posible solutions for that.
I'm running my .NET application in Internet Explorer(Version 11) in compatibility mode. I'm using grid views to display content on my ASPX page. When I open the page and tried to select some cell or row from grid views, it is not selecting properly.
It is so difficult or impossible to select exactly the text you wanted to copy into an e-mail or a document. When you dragged the mouse to select text, you often selected adjacent paragraphs or columns also, even though you didn't want them.
Working fine with Earlier edition(IE 10) and Firefox and Chrome. I have to fix/find out why It is not working in IE 11.
Please let me know how to fix this one.
I think this is a "feature" in IE11 and there's no way to fix it in the code. IE11 text selection seems to struggle once it hits any HTML structures (spans, divs).
There is a work around for users but it's a bit painful. Press F7 to turn on caret mode, then you can select one item (double click) and then, holding down the shift key, use the cursor keys to highlight a selection.
If you have a lot of users, it would be better to implement an "Export to Excel" or "Copy to Clipboard" function than rely on text selections to get to the data.
IE also allows for entire field selection using CTRL+Click (Left Mouse Click).
Edge, nor Chrome allows for this superior selection technique.