经过js加载的网页怎么查看源码

经过JS加载的网页查看源码的方法包括：使用浏览器开发者工具、使用浏览器扩展、使用在线工具、利用抓取工具。

其中，使用浏览器开发者工具是最常见和有效的方法。通过按F12或右键点击页面并选择“检查”，你可以打开开发者工具。在“Network”（网络）选项卡中重新加载页面，查看所有加载的资源，包括通过JavaScript动态加载的内容。选择具体的请求可以查看其响应内容，从而获取动态加载的源码。

一、使用浏览器开发者工具

浏览器开发者工具是前端开发人员最常用的工具之一，它可以帮助你查看网页的HTML、CSS和JavaScript代码，以及网络请求和响应内容。

1. 开启开发者工具

在大多数现代浏览器中，你可以按下F12键或者右键点击页面，然后选择“检查”来打开开发者工具。开发者工具一般包括以下几个主要选项卡：

Elements（元素）：查看和编辑HTML和CSS代码。
Console（控制台）：查看和执行JavaScript代码。
Network（网络）：监视网络请求和响应。

2. 查看网络请求

在“Network”（网络）选项卡中，你可以看到网页加载时所有的网络请求。通过重新加载页面（按F5或点击刷新按钮），你可以捕获所有加载的资源，包括通过JavaScript动态加载的内容。

查看具体请求：点击具体的请求可以查看其详细信息，包括请求头、响应头和响应内容。
过滤请求类型：你可以通过过滤器只查看特定类型的请求，比如XHR（XMLHttpRequest）请求，这类请求通常是通过JavaScript动态加载的内容。

通过这种方法，你可以查看到经过JS加载的动态内容的源码。

二、使用浏览器扩展

有一些浏览器扩展可以帮助你查看经过JavaScript加载的网页源码。这些扩展通常可以捕获和显示动态加载的内容。

1. 例如：Web Scraper

Web Scraper是一个功能强大的浏览器扩展，可以帮助你抓取网页上的数据，包括动态加载的内容。你可以通过配置抓取规则，自动提取你需要的数据。

2. 例如：Scraper

Scraper是另一个常用的浏览器扩展，它允许你选择网页上的元素并提取它们的内容。对于简单的抓取任务，Scraper非常方便易用。

三、使用在线工具

有一些在线工具可以帮助你查看经过JavaScript加载的网页源码。这些工具通常允许你输入网页URL，然后自动抓取和显示网页内容。

1. 例如：Web Scraping Tools

一些在线的Web Scraping工具可以帮助你抓取和查看网页的动态内容。这些工具通常提供可视化的抓取界面，你可以通过拖放操作配置抓取规则。

2. 例如：Puppeteer

Puppeteer是一个Node.js库，它提供了一个高级API来控制无头浏览器。通过Puppeteer，你可以自动化浏览器操作，抓取和查看经过JavaScript加载的网页内容。

四、使用抓取工具

如果你需要大量抓取和分析经过JavaScript加载的网页内容，可以考虑使用专业的抓取工具。这些工具通常提供强大的功能和灵活的配置选项。

1. 例如：Beautiful Soup

Beautiful Soup是一个Python库，它可以解析和抓取网页内容。结合Selenium等工具，你可以抓取和查看动态加载的内容。

2. 例如：Scrapy

Scrapy是一个功能强大的Python爬虫框架，它可以帮助你抓取和分析网页内容。通过编写自定义的抓取规则，你可以抓取和查看经过JavaScript加载的网页内容。

五、使用自动化测试工具

有一些自动化测试工具也可以帮助你抓取和查看经过JavaScript加载的网页内容。这些工具通常用于自动化测试网页功能，但也可以用于抓取和分析网页内容。

1. 例如：Selenium

Selenium是一个广泛使用的自动化测试工具，它可以控制浏览器自动执行操作。通过Selenium，你可以抓取和查看经过JavaScript加载的网页内容。

2. 例如：Cypress

Cypress是一个现代的前端测试工具，它提供了丰富的API来控制浏览器操作。通过Cypress，你可以抓取和查看动态加载的内容。

六、通过API查看内容

有时，网页通过JavaScript加载的内容可能是从后端API获取的。你可以直接调用这些API，查看其返回的数据。

1. 例如：使用Postman

Postman是一个强大的API测试工具，它可以帮助你发送HTTP请求并查看响应内容。通过Postman，你可以直接调用网页使用的API，查看其返回的数据。

2. 例如：使用curl

curl是一个命令行工具，它可以发送HTTP请求并查看响应内容。通过curl，你可以直接调用网页使用的API，查看其返回的数据。

七、使用研发项目管理系统和通用项目协作软件

在团队开发和管理过程中，使用合适的工具可以提高效率和协作效果。如果你的团队需要管理和协作多个项目，可以考虑以下两个系统：

1. 研发项目管理系统PingCode

PingCode是一个功能强大的研发项目管理系统，它提供了丰富的功能来帮助团队管理和协作项目。通过PingCode，你可以轻松管理任务、跟踪进度和协作沟通。

2. 通用项目协作软件Worktile

Worktile是一个通用的项目协作软件，它提供了任务管理、文件共享和团队沟通等功能。通过Worktile，你可以提高团队的协作效率和项目管理效果。

通过以上方法，你可以有效查看经过JavaScript加载的网页源码，并提取你需要的信息。根据具体需求选择合适的方法和工具，可以提高你的工作效率和效果。