Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I inspect the values of tags during the submit of a form using Chrome Dev Tools?

During a page's "dormant" state, I can inspect the values of any tag by entering its id in Chrome Dev Tools' console tab, like so, e.g. for a tag with the name "BeginDate":

0) Enter "BeginDate" in the console tab 1) Mash the key

...and I see the whole shebang:

<input alt="date-us" data-val="true" data-val-regex="End Date must be in the format &amp;quot;m/d/yyyy&amp;quot;" data-val-regex-pattern="[0-9]*[0-9]/[0-9]*[0-9]/[0-9]{4}" data-val-required="End Date must be in the format &amp;quot;m/d/yyyy&amp;quot;" id="EndDate" name="EndDate" style="width: 164px;" type="text" value="5/14/2013" class="hasDatepicker">

So it shows the value, which is the part I'm interested in, is today's date.

What I want to inspect, though, is just what is being passed/posted when the form's Submit button is pressed; I believe this would be, in asp.net, the contents of the Request object, but how can I see these vals using Chrome Dev Tools?

I right-clicked in the console and selected "Log XMLHTTPRequests" and "Preserve log upon navigation" but...are they logged? If so, where are they? I see nothing in the Console tab...

UPDATE

Thanks to David Ziemann, here's what I see:

enter image description here

like image 216
B. Clay Shannon-B. Crow Raven Avatar asked May 14 '13 18:05

B. Clay Shannon-B. Crow Raven


People also ask

How do I inspect data in Chrome?

One of the easiest ways to inspect a specific web element in Chrome is to simply right-click on that particular element and select the Inspect option. Clicking on the Inspect option from the right-click menu will directly open the Developer tools including the editor, Console, Sources, and other tools.

How do I find submitted form data in Chrome developer tools?

Once you select the HTTP request, Chrome will reveal more information on that request. Under the 'Headers' tab, you will be able to find the 'Form Data' section that contains the data that was submitted as part of that request.

How do I see variable values in Chrome console?

The Sources panel provides the ability to watch variables within your application. This is located in the watch section of the debugger sidebar. By taking advantage of this functionality you will not need repeatedly log objects to the console.


1 Answers

The Network tab will show you any network communication. Within that you can select the request and view the headers which should include the form data.

This gives a bit more info into what is being sent

like image 155
David Ziemann Avatar answered Dec 18 '22 18:12

David Ziemann