Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

feat(trace-viewer): add request method/status to the network details tab (#31274)

Browse source
This commit is contained in:
ryanrosello-og 2024-06-20 02:05:20 +10:00 committed by GitHub
parent 6d38525119
commit ee63843f7d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 14 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
packages/trace-viewer/src/ui/networkResourceDetails.css
View file

@ -39,6 +39,11 @@
font-weight: bold; font-weight: bold;
} }
.network-request-details-general {
white-space: pre;
margin-left: 10px;
}
.network-request-details-tab .cm-wrapper { .network-request-details-tab .cm-wrapper {
overflow: hidden; overflow: hidden;
} }
@ -52,7 +57,7 @@
.tab-network .toolbar::after { .tab-network .toolbar::after {
box-shadow: none !important; box-shadow: none !important;
} }
.tab-network .tabbed-pane-tab.selected { .tab-network .tabbed-pane-tab.selected {
font-weight: bold; font-weight: bold;
} }

10
packages/trace-viewer/src/ui/networkResourceDetails.tsx
View file

@ -77,8 +77,14 @@ const RequestTab: React.FunctionComponent<{
}, [resource]); }, [resource]);
return <div className='network-request-details-tab'> return <div className='network-request-details-tab'>
<div className='network-request-details-header'>URL</div> <div className='network-request-details-header'>General</div>
<div className='network-request-details-url'>{resource.request.url}</div> <div className='network-request-details-url'>{`URL: ${resource.request.url}`}</div>
<div className='network-request-details-general'>{`Method: ${resource.request.method}`}</div>
<div className='network-request-details-general'>{`Status Code: ${
resource.response.status >= 200 && resource.response.status < 400
? `🟢 ${resource.response.status} ${resource.response.statusText}`
: `🔴 ${resource.response.status} ${resource.response.statusText}`
}`}</div>
<div className='network-request-details-header'>Request Headers</div> <div className='network-request-details-header'>Request Headers</div>
<div className='network-request-details-headers'>{resource.request.headers.map(pair => `${pair.name}: ${pair.value}`).join('\n')}</div> <div className='network-request-details-headers'>{resource.request.headers.map(pair => `${pair.name}: ${pair.value}`).join('\n')}</div>
{requestBody && <div className='network-request-details-header'>Request Body</div>} {requestBody && <div className='network-request-details-header'>Request Body</div>}