Are there any extensions that offer the ability to have a new column, is XHR, in the Network section of the chrome dev tools? If not, are there any examples of extending chrome to show a new column with it's value deduced to display whether a request is initiated through XHR or not?
I know Chrome offers the ability to "log XMLHttpRequests" and to filter by "XHR." I'm looking for a column that displays whether the request is XHR; should be very simple, but haven't found a solution ...
note - this is a concern because I've enabled the "preserve log" option on the network tab in the chrome dev tools.
There is a type column now that has the response type so document for the initial html request and also things like script, stylesheet, png jpeg... and it also has xhr for xhr requests.
You now can also add Response Headers and even create custom ones if the defaults are not sufficient (right-click somewhere on the column headings to reveal options).
Related
I have Firefox version 52.1. I cannot udpate to newer version, nor can I add plugins that people ordinarily install to address these issues.
I am calling some rest services that require communicating that these are POST request plus a couple of other things ordinarily communicated through hearder information.
What options do I have for adding these specific header requirements to my Firefox request assuming I cannot add plugins or upgrade to a newer version of the browser? Thank you.
Ok, so simply by opening the very basic developer tools (i.e. press F12), then executing the request (which will fail because it is missing header info), then selecting the network tab in the tool followed by the All within the Network frame, it shows the failure info. Then I can select the default method value (GET) in the table of the attempted request, it will open a frame of the right of the tool. This frame has a header tab whose frame allows you to modify the header by clicking the Edit and Resend button. Click that button and then add the additional needed header params. then click the resend button.
Another option is to use Postman. Especially when you're going to do this on a regular basis. I started out using just the browser like you, but it got pretty cumbersome, so I switched to Postman.
web.postman.co
I'm working for a project which run by chrome headless driver puppeteer, And i recently found a website (https://chrome.browserless.io/) could show puppeteer process in browser. This website appended an chrome devtoll which looks like magic.
i try to figure out how did work, and i found that this website inject a chrome devtool iframe, and the url usually like below:
https://chrome-devtools-frontend.appspot.com/serve_file/#7f3cdc3f76faecc6425814688e3b2b71bf1630a4/inspector.html?wss=chrome.browserless.io/devtools/page/(4BDC5841A823B95BF9B6107801819A31)&remoteFrontend=true
i think the version after inspector.html refer for the puppeteer code, but i don't know how this work.
i think this is some method imply over DevTools Protocol. I search the document but found nothing about how to put chrome devtool iframe in browser.
Does anyone know how to do this? or any document about this?
The Browserless Chrome Debugger you mentioned in your question has an instance of CodeMirror text editor embedded in the left hand section.
In the right hand section, an iframe element exists to display the result of the code you executed.
Simply put, you can simulate this type of behavior and allow users to execute Puppeteer code directly from your website by following a series of steps:
Sandbox a section of your system with a system container manager, such as LXD.
Install Node.js, NPM, and Puppeteer.
Install a web-based code editor, like CodeMirror, and embed it into a web page.
Validate and send an AJAX request with the code from the text editor to your sandbox server.
Sanitize the code, and then pass the code to Puppeteer.
Return the result to your callback function in your AJAX request on the client-side.
Format and sanitize the result before displaying it in an iframe.
Note: This is a naive implantation of this concept intended to explain the bare necessities of what would be required to obtain the goal in the question.
Make sure that you follow all generally recommended security practices.
So like they title says, is it possible to check for the location and line of where an api is exactly being calling in the XHR Networks tab in Chrome Dev Tools? If so how?
Thank you.
That is possible, by going into the network panel tab. Check the 'Initiator' column.
Usually the xhr call in itself is done by a library, e.g. jquery. It might be useful to mouse over the column value to get the stack trace of the call. From there you should be able to jump to the high-level xhr call that interests you. See capture:
How to search through all the ajax responses in network tab in Chrome?
I want to do this is because it is difficult for a JavaScript developer to get to know which information is coming from which service call, especially if you are new to the project and business logic is not clear. Also, opening each service in a network tab and searching in responses of so many service calls is difficult and time consuming.
This has now been implemented on the Network tab. Whenever a search criteria is added, Chrome will offer searching through all headers and bodies.
More from offical doc,
Open the Network panel then press Command+F (Mac) or Control+F (Windows, Linux, Chrome OS) to open the new Network Search pane.
This is similar to another question this morning to search json responses. The solution is the same, star this issue this issue. Starring is triggered via the star icon in the far left area of the blue title are just under search.
Starring issues let's the developers know what people need. The more stars something has, the more likely it is to get worked on sooner.
Currently this functionality is not provided and extensions are unable to add this type of functionality since the network panel isn't extensible in this way.
In Firefox you can save all the responses as a HAR file and then search through the file in a text editor (Chrome truncates the responses).
Inspector of Microsoft Edge browser offer such feature. Useful when you need to search through traffic made by an HTTPS web site that Fiddler cannot inspect (like Facebook web site).
There doesn't seem to be a way to do this in Chrome or Firefox. My solution has been to use Fiddler, which does support it.
Edit: I believe this was working for all resources at the time of writing, but please see comments because people say it is not/no-longer working as expected.
As of Chrome version 91, if you want to search through all resources (not just AJAX/fetched resources), then you need to open DevTools and then press Ctrl+Shift+F to open a search box. If you just type into the "filter" text input then it only searches through the URLs, rather than also searching the contents.
I would like to create a browser plugin/extension that would allow the browser to read contents of a cross-domain iframe. I understand that this isn't possible with javascript, but perhaps someone could point me in the right direction of how to create a plugin that users could install. A cross-browser solution would be ideal.
Specifically, I am creating helpful navigation utility, and I want to know the url of the iframe so that I can prevent the iframe from navigating to any questionable sites accidentally. I would also like to detect the size of the contents.
Thanks in advance.
Option 1: file_get_contents:
What you can try is to get the contents from the page by the PHP function file_get_contents, load the CSS files and get the contents and the size of the page.
Option 2: Headers:
You can start here: http://www.senocular.com/pub/adobe/crossdomain/policyfiles.html
See the "allow-access-from" section where you can allow domains to be accessed cross domain when they have specific headers.
Userscripts have cross-domain XMLHttpRequest, and they will even run on all browsers. They (or at least Kango's Content Scripts) have the ability to write and read stored values for cross-window communication.