Debugging a page where I see that there are two calls made to the page, one is the initial call and one is made when the first has been recieved and the browser parses the document. I am however having trouble finding the source of the second call. I have built the javascript i dev mode so I have sourcemaps but the call seems to be originating from the html code itself. Looking in the Network tab of devtools I see this
in Chrome and this
in Firefox
Firefox seems to identify the Initiator as image but no more details as to what image.
What should I look for in the code to find the source of the call? Is there something else I can do to get more details of where the call is made from?
Update:
Clicking the initator item in Chrome marks the first Doctype line in the document
That the request is recognized as an image is an indication for either an <img> HTML element or a url() CSS function that has a URL that references the document itself instead of an image.
Check the HTML
From my tests, this does not happen when the src attribute is empty but it happens when you set it to an anchor on the page.
So, in order to find the culprit, go to the Inspector (Firefox) or Elements (Chrome) panel, press Ctrl+F (Windows, Linux) or Cmd+F (macOS) and search for img[src^="#"]. That finds all <img> elements that have a src attribute with a value starting with a hash.
Check the CSS
Browsers (incorrectly) send a network request when the CSS url() function is set to an empty string, i.e. url(), url(''), or url("").
To check whether it is set within the style attribute of one of the HTML elements, search for url('') and url() within the Inspector as described above.
If it cannot be found there, you need to search within the style sheets.
Chrome
In Chrome this is possible by pressing Ctrl+Shift+F (Windows, Linux) or Cmd+Shift+F (macOS) while the focus is within the DevTools. Doing so opens a search tool that allows to search across all loaded sources. Type url('') in there and hit Enter. If nothing is found, try it again with url("") and url().
Firefox
In Firefox there's no such global search yet (as of Firefox 85), unfortunately. Though there are two ways other ways to search through the style sheets.
Via the Style Editor
The Style Editor allows you to inspect the style sheets, though you have to search in each one separately by selecting it at the left side and then pressing Ctrl+F (Windows, Linux) or Cmd+F (macOS), typing url(), url(''), or url("") and hitting Enter.
Via the Network Monitor
There's a feature that allows you to search through the network request reponses within the Network Monitor. Click the magnifying glass button, which opens the search tool. In the input field type url(), url(''), or url("") and hit Enter.
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.
This question is similar to How can I inspect disappearing element in a browser?, except it's the reverse.
I'm trying to debug which JS adds a bunch of rogue <iframe> aswift_1, aswift_2, etc. elements to the page, like so:
I'd like to use Chrome Devtools (or Firefox) to pause execution as soon as such an element is added and inspect the call stack, hopefully finding the culprit.
Other ideas are welcome as well.
You can use this simple chrome extension.
It will trigger the debugger AFTER element with id matching aswift_ is added(of course you need to open chrome dev tools first).
https://gist.github.com/maciejmackowiak/8043c8630004644144711f730ef45f1b
To activate this extension download -> unpack, open manifest.json and in line 8 change the example.com to the domain you want to inspect.
Then go to chrome://extensions/
Click on Developer mode and Load unpacked
When you will go to the page maching the domain this should show up after element with id starting with aswift_ is added:
Paused in debugger
Now you can use "step over next function call(F10)" (you may need to hit it few times before it will loop thru all mutations and "go" to another function)
Quickest way in chrome would be to take a look at either the network tab (for response) or do a global search using Ctrl+Shift+F on Windows and look for certain tags used in those elements which are being added to the DOM
I have a html page with several links to files with various file types, such as pdf, csv, and zip. Depending on the available browser plugins, some of these files can be opened inline by the browser, whereas others will be downloaded.
I don't want such links to open in the current tab, so each one has the attribute target="blank".
This works fine in most browsers:
When the user clicks on a link to a file that can be displayed inline, the file is shown in a new tab.
Otherwise, a new tab is opened and immediately closed as soon as the file starts to download. The user stays in the current window.
In Microsoft Edge, however, the second case does not work: the new tab remains open. This is annoying, because the user is now looking at a useless empty tab.
Is there any way to prevent this from happening?
I don't think there is anything you can prevent Edge's this behaviour. What you can do is to change the HTML tag.
Use download attribute in <a> element without target attribute. This way, the browser will prompt save dialog instead of opening a new tab.
<a href="myfile" download>Download</a>
http://www.w3schools.com/tags/att_a_download.asp
In this case, the browser will not display the file inline.
If you still want your clients be able to see the files inline you can detect the client's browser; if it is Edge then use the download attribute, if not use target attribute. In addition, you can use something like navigator.mimetypes to detect which file types can be displayed inline (see https://developer.mozilla.org/en-US/docs/Web/API/NavigatorPlugins/mimeTypes).
Here is the detect function which I took from another post (How can I detect Internet Explorer (IE) and Microsoft Edge using JavaScript?)
function isEDGE(){
return /Edge\/\d./i.test(navigator.userAgent)
}
Leave your <a> tags with no target and download attributes. Use detect function and decide on the right attribute.
Like this:
$(document).ready(function(){
if(isEDGE()) {
$('a').attr('download','download');
} else {
$('a').attr('target','_blank');
}
})
Note:
I am not sure about Edge detecting function.
Method 1:
I suggest you clear the Clear browsing data option of Microsoft Edge and check if you face the issue. To do so perform the steps below.
Click on the More actions icon next to the feedback icon present on top right corner of the Edge.
Select Settings and click on Choose what to clear.
Check the boxes Browsing history, Cookies and saved website data and Cached data and files and click on Clear.
Method 2:
If you are using any Proxy connection, then try disabling the proxy connection and check.
Follow the steps to disable proxy:
Click the Settings icon at the top right corner in internet explorer.
Click the Tools button, and then click Internet Options.
Click the Connections tab, and then click LAN settings.
Uncheck the box next to “proxy server for your LAN”.
Click on OK to save the setting and close window.
Now check the issue by opening Edge.
My problem is this - when I click the down button on any input control on my form in Chrome a popup window is displayed. I am positive my code does not do it. The fact that it happens only in Chrome makes me think of some misbehaving Chrome plugin/extension.
Anyway, I would like to see the HTML element responsible for this popup. However, I cannot find it in the dev tools and trying to focus on it does not work - the popup closes the moment I click the page.
So, my question - is there a easy way to get hold on this HTML element without clicking the page?
I am using Chrome 23.0.1271.64 with the following extensions (according to the Chrome itself):
Advanced REST client 3.0.30
JSONView 0.0.32
OneClickDownload 1.2 Web
Developer 0.4.1
This looks just like the standard input field suggestion box. I suspect it is not part of the web page. Therefore it won't appear in the DOM and you can't style it, because it is part of the browser not the web page (although it appears over the top of the web page).
You can suppress it by putting the attribute & value autocomplete=off on the form field, although that is from HTML5 and will not work in all browsers just yet. See Is there a W3C valid way to disable autocomplete in a HTML form?