diff --git a/packages/trace-viewer/src/ui/networkResourceDetails.css b/packages/trace-viewer/src/ui/networkResourceDetails.css index fce4e8b2c3..ce0648b8c2 100644 --- a/packages/trace-viewer/src/ui/networkResourceDetails.css +++ b/packages/trace-viewer/src/ui/networkResourceDetails.css @@ -39,6 +39,11 @@ font-weight: bold; } +.network-request-details-general { + white-space: pre; + margin-left: 10px; +} + .network-request-details-tab .cm-wrapper { overflow: hidden; } @@ -52,7 +57,7 @@ .tab-network .toolbar::after { box-shadow: none !important; } - + .tab-network .tabbed-pane-tab.selected { font-weight: bold; } diff --git a/packages/trace-viewer/src/ui/networkResourceDetails.tsx b/packages/trace-viewer/src/ui/networkResourceDetails.tsx index c5a974b69e..e7b1bad4b6 100644 --- a/packages/trace-viewer/src/ui/networkResourceDetails.tsx +++ b/packages/trace-viewer/src/ui/networkResourceDetails.tsx @@ -77,8 +77,14 @@ const RequestTab: React.FunctionComponent<{ }, [resource]); return
-
URL
-
{resource.request.url}
+
General
+
{`URL: ${resource.request.url}`}
+
{`Method: ${resource.request.method}`}
+
{`Status Code: ${ + resource.response.status >= 200 && resource.response.status < 400 + ? `🟢 ${resource.response.status} ${resource.response.statusText}` + : `🔴 ${resource.response.status} ${resource.response.statusText}` + }`}
Request Headers
{resource.request.headers.map(pair => `${pair.name}: ${pair.value}`).join('\n')}
{requestBody &&
Request Body
}