开发者模式(浏览器能力)

什么是开发者模式

开发者模式（也叫检查模式或调试模式）是一种浏览器工具，在配置调试过程和协助研发老师排查问题时（特别是一些纯内网项目，常常只有顾问可以在现场操作，更需要掌握），借助这个工具可以帮助我们在配置过程中获取更多系统信息，例如接口参数，常用的company_id，文件index等，还可以帮助我们快速定位报错问题

如何打开检查模式（以谷歌浏览器为例）

在Chrome菜单中选择“更多工具” > “开发者工具”。
在页面点击鼠标右键，在选择框中滑动到最底部，点击检查即可进入检查模式。
使用快捷键(仅供参考，以自己电脑的快捷键为准)：Windows上的Ctrl + Shift + I，Mac上的Cmd + Opt + I。

移动端或集成端可➡参考wiki

如何使用检查模式

检查模式下我们可以获取到的信息非常多，检查窗口的位置支持用户自定义

面板介绍

Elements（元素）面板：用于查看和编辑页面的HTML和CSS。
Console（控制台）面板：用于显示JavaScript错误和警告，以及执行JavaScript代码。
Sources（源代码）面板：用于查看和调试网页的JavaScript源代码。
Network（网络）面板：用于监控网页加载过程中的网络请求，页面请求的接口和接口传入返回参数就在这里查看。
Performance（性能）面板：用于分析网页的性能和加载时间。
Memory（内存）面板：用于监控JavaScript的内存使用情况。
Application（应用）面板：用于查看和管理网页的存储数据（如Cookies、IndexedDB等）。
Security（安全）面板：用于调试网页的安全问题。

基本操作

选择元素：在Elements面板中，点击箭头图标选择页面上的元素。
编辑样式：在选中元素后，可以在Styles面板中编辑其CSS样式。
查看网络请求：在Network面板中查看网页加载过程中的所有网络请求。
执行JavaScript代码：在Console面板中输入和执行JavaScript代码。

进阶操作

设置断点：在Sources面板中设置JavaScript断点，以便在代码执行到该点时暂停。
性能分析：使用Performance面板记录和分析网页的性能数据。
调试内存问题：使用Memory面板监控和分析JavaScript的内存使用情况。

文档和教程

更多开发者工具介绍，可以自行搜索详细的开发者工具指南和教程。

切换开发者模式看板语言

常用实际操作

查看页面接口传参及返回数据

注意，这个操作在环境开启服务器的加密参数时，接口传参及返回数据会被加密无法使用，若在加密参数开启时需要使用接口信息进行调试，参考wiki：开启加密参数后如何进行调试

在进入页面前打开检查模式，或打开后刷新页面，可以在检查模式的切换到Network（网络）面板查看页面请求的接口，左侧是请求的接口列表，右侧是所选中的接口的详细信息，包括可以查看请求头，传入参数，返回值等，最常用的是查看传参和返回值

文件 index说明及查看方式

文件index在日常系统配置过程中，会经常听到及用到，index是一种索引文件，可以帮助我们在数据库表中高效查询，通过索引可以快速选择符合条件的数据行，

所以当我们在系统中上传一个文件时，系统都会生成一个文件索引，帮助我们在数据库中快速定位这个文件

如何获取文件index

那么当我们需要知道一个文件的index是什么时，要如何操作呢，这里分为两种情况，上传文件时通过接口信息查看，或查看之前已经上传的文件索引

上传文件时通过接口信息查看操作如图	查看之前已经上传的文件索引操作如图
	1.打开检查模式，点击检查窗口左上角的选择元素按钮；2.按图中操作找到该附件对应的前端元素 3.找到高亮的附件对应元素，元素内可以看到带下划线的链接；4.将鼠标移动到链接上，即可在悬浮窗中看到文件的index