ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

浏览器的开发者工具使用介绍

2021-10-18 22:07:13  阅读:162  来源: 互联网

标签:浏览器 Microsoft Edge 开发者 工具 控制台


浏览器的开发者工具使用介绍

浏览器开发者工具(通常称作devtools)是一种网页开发者测试和调试代码的工具,一般内置于网页浏览器或者作为浏览器的附加组件使用。不同于网站创建器或者集成开发环境,Web 开发工具不直接参与网站的创建,而用于测试网站或网页应用的用户界面。Web 开发工具便于开发人员调试各种浏览器网页处理技术,例如HTML、CSS、DOM、JavaScript,显示每个资源页面的请求以及载入所花费的时间等。

打开浏览器后,按下F12键,可以打开浏览器自带的开发工具,它有多个面板。Microsoft Edge浏览器的参见下图:

浏览器控制台(Console)使用简介

浏览器的“开发者工具”(Developer Tools)里面的“控制台”(console),是运行 JavaScript 代码的理想环境。打开浏览器,按下 F12键,然后选择 “控制台”(console) 面板,就进入了控制台。进入控制台以后,就可以在提示符后输入代码,然后按回车(Enter键),代码就会执行。如果按Shift + Enter键,就是代码换行,不会触发执行。

在浏览器控制台中输入多行语句示例:

let x=2 //按shift+enter键

let y=5  //按shift+enter键

console.log('和:',x+y)  //按enter键

参见下图:

特别提示:在浏览器控制台中使用console.log()语句,如console.log("Hello"),没有显示的原因及解决:

原因筛选框中有内容,删除之即可,参见下图:

如何在浏览器中查看HTTP请求或响应头?

步骤:

1、用浏览器(在此以 Edge为例),访问一个网址(在此以https://www.baidu.com/为例),用如下操作之一:

点击右键,选择检查,打开“开发人员工具”;

直接按F12。

2、选择 Network(网络) 选项卡。

3、重新加载页面。

4、单击“名称”格的HTTP请求,在“标头(Headers)”格中显示相关信息。参见下图:

附录:主要浏览器开发者工具参考网址

Edge Microsoft Edge开发人员工具概述 - Microsoft Edge Development | Microsoft Docs

Chrome Chrome 开发工具指南_w3cschool

【Microsoft的Edge浏览器基于Chromium(由Google主导开发的网页浏览器)开发的,Microsoft的 Edge浏览器和Google的Chrome浏览器开发者工具差不多。】

Firefox Firefox 开发者工具 | MDN

标签:浏览器,Microsoft,Edge,开发者,工具,控制台
来源: https://blog.csdn.net/cnds123/article/details/120822401

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有