浏览器f12中sources可以看ts代码吗 浏览器如何调出代码

主要内容：

1. 查看网页源代码的方法
2. 关于网页源代码页面的使用
3. 关于 HTTP 和 HTTPS协议
4. 关于网址的简化

一、查看网页源代码的方法

• 所谓网页源代码：也就是网页背后的编程代码

例如：在谷歌浏览器中打开 阿里巴巴网页，以此页面为例

1.1 方法一：利用快捷键【F12】键

• 按 【F12】键，在在窗口下方会打开一个包含一些代码内容的界面。如果该界面不是显示在窗口下方而是窗口右侧，可以单击该界面右上角的按钮来切换布局方式，如下图所示

• 此页面被称为 开发者工具，是进行是进行数据挖掘的利器

1.2 方法二：用右键快捷菜单

• 在网页上右击，在弹出的快捷菜单中选择查看网页源代码 命令，也回弹出一个包含网页源代码的窗口

1.3 两个方法的区别和具体使用的选择

• 使用两个方法看到的网页源代码可能相同，也可能不同，
• 两者的区别在于：

• 开发者工具显示的网页 是浏览器对原始源代码做了错误修正和动态渲染的结果。
• 使用右键快捷菜单显示的网页 是网站服务器返回给浏览器的原始源代码，基本上就是用Requests库能获取到的内容；

• 具体的使用选择： 两种方法结合使用

• 先用开发者工具初步了解网页结构，
• 再用右键快捷菜单查看网页源代码，并利用快捷【Ctrl+F】进行搜索，确定所需内容在网页源代码中的位置。

• 如果使用右键快捷菜单看到的网页源代码和使用开发者工具看到的网页源代码差别较大，则说明该网页做了动态渲染处理（这是一种反爬措施），此时需要使用Selenium库来获取网页源代码。

二、关于网页源代码页面的使用

• 大多数爬虫任务只需要使用下图所示的两个功能——元素选择、Elements

2.1 元素选择工具

• 单击元素选择工具按钮，按钮颜色会变成蓝色
• 然后在上方的网页中移动鼠标，鼠标指针所指向的网页元素的颜色会发生变化
• 同时“Elements”选项卡中的内容会随之发生变化
• 当元素选择工具按钮处于蓝色状态时，在上方的网页中单击第一个链接，这时按钮变回灰色，而“Elements”选项卡中的内容也不再变动，我们就可以开始观察单击的链接对应的网页源代码的具体内容了
• 我们一般只关心里面的文本内容，如果没看到文本内容，单击左边的三角箭头，即可展开内容

2.2 Elements 选项卡

• “Elements ”选项卡中的内容可以理解为网页源代码，也是爬虫的第一项工作要获取的内容
• 可以利用这个完成一些编辑操作，修改网页中的相关信息
• 利用开发者工具，我们可以初步了解网页的结构，并利用元素选择工具和 “Elements ”选项卡观察我们想要获取的内容在源代码中的文本格式及所在的位置

三、关于 HTTP 和 HTTPS协议

3.1 HTTP 和 HTTPS 的概念

• 超文本传输协议 (HTTP) 是一种详细规定了浏览器和万维网服务器之间互相通信的规则，通过因特网传送万维网文档的数据传送协议。
• HTTPS是以安全为目标的HTTP通道，简单讲是HTTP的安全版。即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL，用于安全的HTTP数据传输。

3.2 HTTP 和 HTTPS 的主要区别

• http是超文本传输协议，信息是明文传输，https 则是具有安全性的ssl加密传输协议
• http和https使用的是完全不同的连接方式用的端口也不一样,前者是80,后者是443。
• http的连接很简单,是无状态的
• HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议 要比http协议安全
• https协议需要到ca申请证书，一般免费证书很少，需要交费

3.3 在爬虫中输入网址的注意事项

• 虽然在浏览器地址栏中输入网址：www.baidu.com能正常打开网页，但在爬虫编程中要使用完整的地址 ：https://www.baidu.com/
• 获取完整网址最简单的办法是直接用浏览器访问网址，确认能正常打开网页后，将地址栏中的网址复制、粘贴到代码中使用。

四、关于网址的简化

• 有时浏览器地址栏中显示的网址非常长，虽然在爬虫中可以使用这么长的地址，但是推荐使用简化的网址
• 简化网址的方法：

• 可以看到网址中的“？”号后面跟了很多通过“&”号连接的内容，这些内容称为网址的参数
• 很多参数都不是必需的，可以尝试将“&”及其连接的内容删掉，看看网址是否还能访问，如果能访问，则说明该参数不是必需的，可以删去该参数来简化网址

• 例如：

• 可简化为：https://www.baidu.com/s?wd=阿里巴巴