以下是关于谷歌浏览器开发者工具常用功能指南的内容：
一、元素检查与编辑
1. 进入开发者工具：在谷歌浏览器中，按下F12键或者右键点击页面，选择“检查”选项，即可打开开发者工具。在开发者工具中，默认显示的是“Elements”面板。
2. 查看页面元素结构：在“Elements”面板中，可以看到网页的HTML结构。将鼠标悬停在元素标签上，页面中的相应部分会被高亮显示，这样可以清晰地了解页面元素的布局和层级关系。例如，对于一个网页中的图片，可以在“Elements”面板中找到对应的img标签，查看其属性，如`src`（图片源地址）、`alt`（替代文本）等。
3. 编辑元素属性：可以直接在“Elements”面板中修改元素的属性。双击元素标签或者右键点击标签，选择“Edit as HTML”选项，就可以对元素的HTML代码进行编辑。比如，修改图片的`alt`属性，使其更符合页面内容和SEO要求。修改后，页面会实时更新，方便查看修改效果。
4. 添加和删除元素：右键点击元素标签，可以选择“Edit as HTML”后，在标签内或标签外添加新的HTML代码来添加元素。例如，在一个段落标签p内添加一个新的链接标签a。同样，也可以右键点击元素，选择“Delete element”来删除不需要的元素，不过要注意这可能会影响页面的布局和功能。
二、样式查看与修改
1. 查看元素样式：在“Elements”面板中，选中一个元素后，在右侧会显示“Styles”面板。在这里可以看到该元素所应用的CSS样式，包括内联样式和通过链接或嵌入的外部样式表定义的样式。样式按照优先级从高到低排列，可以清楚地看到每个样式规则的来源。
2. 修改样式属性：在“Styles”面板中，可以直接修改元素的CSS样式属性。双击样式属性的值，就可以进行编辑。例如，改变一个元素的文字颜色、字体大小或者背景颜色等。修改后，页面会立即更新，以便观察样式变化对页面外观的影响。
3. 添加新样式规则：在“Styles”面板中，可以添加新的CSS样式规则。点击“:after”按钮或者“:before”按钮，可以为选中的元素添加伪元素样式。也可以在元素的属性中添加新的CSS类，然后在“Styles”面板中为该类定义样式。这样可以方便地为页面元素添加自定义的样式，而不会影响原有的样式表。
4. 禁用样式规则：如果不想删除某个样式规则，但想暂时查看页面在没有该规则时的效果，可以右键点击该样式规则，选择“Disable rule”选项。这样该规则就会被暂时禁用，页面会相应地发生变化，有助于分析样式对页面的影响。
三、网络请求分析
1. 打开网络面板：在开发者工具中，点击“Network”标签，可以打开网络面板。网络面板用于显示网页加载过程中所有的网络请求信息，包括请求的资源类型（如脚本、样式表、图片等）、请求方法（GET、POST等）、请求状态（成功、失败等）和请求时间等。
2. 查看请求详情：点击一个网络请求条目，可以在下方查看该请求的详细信息。包括请求头（Request Headers）、响应头（Response Headers）和响应体（Response Body）等信息。请求头包含了浏览器向服务器发送的相关信息，如用户代理、Cookie等；响应头包含了服务器返回给浏览器的相关信息，如内容类型、缓存控制等；响应体则是服务器返回的实际内容，对于脚本和样式表文件，可以看到其源代码。
3. 筛选网络请求：在网络面板中，可以使用筛选功能来查找特定的网络请求。例如，只查看图片资源的请求，可以在筛选框中输入“img”，这样网络面板中只会显示资源类型为图片的请求。还可以根据请求方法、状态码等进行筛选，方便分析特定类型的网络请求。
4. 分析网络性能：通过网络面板，可以分析网页的网络性能。查看各个网络请求的加载时间，找出加载时间过长的请求，这些请求可能是导致网页加载缓慢的原因。例如，一个大的图片文件或者一个复杂的脚本文件可能需要较长的时间来加载，可以考虑对这些资源进行优化，如压缩图片、合并脚本文件等，以提高网页的加载速度。
四、控制台使用
1. 查看控制台信息：在开发者工具中，点击“Console”标签，可以打开控制台。控制台用于显示网页中的JavaScript错误、警告信息以及开发者输出的日志信息。当网页中的JavaScript代码出现错误时，控制台会显示错误的类型、位置和详细信息，帮助开发者快速定位和解决问题。
2. 输出日志信息：在控制台中，可以使用`console.log()`、`console.warn()`、`console.error()`等方法输出日志信息。例如，在一个JavaScript函数中，可以使用`console.log("这是一个日志信息")`来输出一条日志信息，帮助开发者在开发过程中跟踪代码的执行情况。这些日志信息会显示在控制台中，并且可以根据需要进行过滤和搜索。
3. 执行JavaScript代码：控制台也是一个临时的JavaScript代码执行环境。可以在控制台中直接输入JavaScript代码，并立即执行。例如，输入`document.getElementById("myElement").innerHTML = "新的内容"`，可以修改页面中id为“myElement”的元素的内容。这对于测试JavaScript代码片段、修改页面元素内容等操作非常有用。
4. 清除控制台信息：如果控制台中的信息过多，可以使用控制台左上角的清除按钮来清除所有日志信息，以便重新开始查看新的信息。也可以使用快捷键Ctrl + L（Windows系统）/Command + L（Mac系统）来快速清除控制台信息。