登录查看更多内容

What are the best practices for filtering and sorting network requests?

由人工智能和领英社区提供技术支持

As a front-end developer, you often need to inspect, filter, and sort the network requests that your web application makes to the server or other APIs. This can help you debug issues, optimize performance, and understand the data flow. But how can you do this effectively and efficiently? In this article, we will share some best practices for using the browser devtools network tab to filter and sort network requests.

此文章中的业界达人

由社区从 4 条内容中精选。了解更多

1 Use the filter toolbar

The filter toolbar is a powerful tool that allows you to filter network requests by various criteria, such as type, status, domain, method, or keyword. You can also use operators, such as AND, OR, and NOT, to combine multiple filters. For example, you can filter by status:200 AND type:script to see only the successful script requests. To access the filter toolbar, click on the filter icon or press Ctrl+F (Cmd+F on Mac) on the network tab.

添加您的观点

Zachary Saltzman

Senior Software Engineer at National Service Alliance, Founder of Saltzman Tech & Design, LLC
举报内容
- To optimize relevant results, it is possible to disregard "optimized"/minified versions of scripts including minified javascript to have a more scaled down list of files fitting your criteria. - Filtering by domain can also help tell wether you are sending your end user somewhere internally or externally - which can be valuable for security reasons - Regex expressions can be used to more directly target filtered searches

已翻译

赞

2 Use the search box

The search box is another useful tool that allows you to search for specific network requests by name, URL, or response content. You can also use regular expressions to perform more advanced searches. For example, you can search for /\.jpg$/ to find all the requests that end with .jpg. To access the search box, click on the magnifying glass icon or press Ctrl+F (Cmd+F on Mac) on the network tab.

添加您的观点

3 Use the columns

The columns on the network tab display various information about each network request, such as name, size, time, status, method, type, and more. You can customize the columns by right-clicking on the header and selecting or deselecting the ones you want to see. You can also sort the network requests by any column by clicking on the header. For example, you can sort by size to see which requests are taking up the most bandwidth.

添加您的观点

Zachary Saltzman

Senior Software Engineer at National Service Alliance, Founder of Saltzman Tech & Design, LLC
举报内容
- Waterfall and/or Time columns will help see the performance of requests being made concerning proper order and identify unoptimized run times. It is a tool that can be used to identify which of your requests are causing the most load time on your site. - Preserving Log and Clearing the Log will help track down bugs. By preserving log, you have access to the entire history of your open network tab session. On the other hand, clearing the log filters out all requests that come before your future actions.

已翻译

赞

4 Use the presets

The presets are predefined filters that allow you to quickly filter network requests by common scenarios, such as XHR, JS, CSS, Media, or WS. You can access the presets by clicking on the dropdown menu next to the filter icon on the network tab. You can also create your own presets by clicking on the manage button and adding or editing the filters you want.

添加您的观点

5 Use the export and import features

The export and import features allow you to save and load network requests as HAR (HTTP Archive) files. This can be useful for sharing, analyzing, or reproducing network activity. To export network requests, right-click on any request or select multiple requests and choose Save as HAR with content. To import network requests, drag and drop a HAR file onto the network tab or click on the import button.

添加您的观点

6 Use the request details

The request details panel shows more information about a specific network request, such as headers, cookies, query parameters, response body, timing, and more. You can access the request details panel by clicking on a network request on the network tab. You can also switch between different tabs on the panel to see different aspects of the request. For example, you can see the preview tab to see a formatted view of the response content.

添加您的观点

Zachary Saltzman

Senior Software Engineer at National Service Alliance, Founder of Saltzman Tech & Design, LLC
举报内容
- Payload can be used to verify the data that was sent in a request - including correct value mapping, type of data, and wether it was correctly sanitized (removed unwanted characters or trimmed) - The response tab can be used to print out custom errors on requests - for example conditionals that render and return a hardcoded error in a php script

已翻译

赞

7 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?

添加您的观点

Benson Amollo

Front-End Software Developer, Freelance
举报内容
Use server-side filtering and sorting: When possible, use server-side filtering and sorting to reduce the amount of data that needs to be transferred over the network. This can improve the performance of your application and reduce the load on the client. Use query parameters to specify filters and sorting: Use query parameters in the URL to specify filters and sorting options. This can make it easier to cache responses and share URLs that represent specific queries. Validate input parameters: Validate input parameters to prevent security issues and errors. Use data types and range checks to ensure that the input parameters are valid.

已翻译

赞

Front-end Development

+ 关注

给文章评分

我们借助人工智能创建了此文章。您认为这篇文章怎么样？

很棒不太好

举报此文章

查看全部

What are the best practices for filtering and sorting network requests?

1

2

3

4

5

6

7

1 Use the filter toolbar

2 Use the search box

3 Use the columns

4 Use the presets

5 Use the export and import features

6 Use the request details

7 Here’s what else to consider

Front-end Development

给文章评分

感谢您的反馈

更多Front-end Development相关文章

更多相关阅读内容