浏览器F12有啥用

最新推荐文章于 2024-05-06 08:49:13 发布

哈拉瓜

最新推荐文章于 2024-05-06 08:49:13 发布

阅读量4k

点赞数 6

分类专栏： JavaScript 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/hala_melon/article/details/128333941

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

F12一个被大多数人抛弃在键盘角落，很少被用到的键，相比很少接触（除了部分软件的快捷键）而在电脑浏览器里确是一片新天地。

萌新可以参考，大佬请多多指导。

是啥

你看到的一个同一个网页，其实原先的样子并非如此，你按下ctrl+u即可看见它的真面目

原来的样子

实际的样子

其实每个模块都是有一段一段代码组成的，而f12就是一个用于给大家调试自己的网页的快捷工具

在此声明：本文只会涉及到少量JavaScript内容，请放心食用（~~毕竟我也不咋会~~）

有啥

元素（ELements）、控制台（Console）、源代码（Sources）、网络（Network）

大家正常会设计到这四个，剩下就都是彻彻底底给设计网页的人设计的，而很明显与文章的利益不相关。

元素（ELements）

用于查看或修改HTML元素的属性、CSS属性、监听事件、断点（DOM断点：在JavaScript调试中，我们经常使用到断点调试，其实在DOM结构的调试中，我们也可以使用断点方法，这就是DOM Breakpoint（DOM 断点））

其实与源代码有点类似，不过结构简洁明了，更加的有逻辑性。

大多数可以修改，不过知识本地的，刷新后就没了~~，装逼可用~~。

多数为英文的，也有部分浏览器支持中文，不过更加推荐英文，毕竟翻译之间会有沟坎，会少许影响到使用。

控制台（Console）

可以理解为输指令的地方，MC和玩家都熟悉

我的世界

一个有些报错信息的控制台

其实这也是类似的，可以用JavaScript语句，查看JS对象的及其属性，以及可以查看日志（部分），就像我的世界里命令执行以后会有一个回馈。

源代码（Sources）

虽然叫做源代码，但其实和ctrl+u调出来的不同。

左边篮筐里的是源文件，而右边就是调试的工具。

网络（Network）

共四个模块：

Header：面板列出资源的请求url、HTTP方法、响应状态码、请求头和响应头及它们各自的值、请求参数等等
Preview：预览面板，用于资源的预览。
Response：响应信息面板包含资源还未进行格式处理的内容
Timing：资源请求的详细信息花费时间

如果是自己的网站，可以来查哪出了问题，哪些资源加载不出来等，具体参考：扶墙而出大佬的细致说明https://blog.csdn.net/m0_49687544/article/details/125867341

一些有趣的东东

讲完原理，讲点应用。

小恐龙

这个就是chorme浏览器自带的小恐龙游戏，没网时可以去搜东西，然后就出来了。

有网的时候操作如下：

1、按下F12，打开面板

2、点开网络（Network）

3、选择offline

4、随便搜索

小恐龙就出来了

~~（后来才知道可以直接输chrome://dino/）~~

接下来就可以输代码了

恐龙加速(概率死亡,非无敌)：

最高299792458

Runner.instance_.setSpeed(99999);

勇敢龙龙(死不了):

Runner.instance_.gameOver=function(){}

跳高达龙(跳得高) :

Runner.instance_.tRex.setJumpVelocity(1000000)

人工智龙(全自动，有可能死):

function TrexRunnerBot() {
 
 const makeKeyArgs = (keyCode) => {
 
 const preventDefault = () => void 0; return {keyCode, preventDefault}; };
 
 const upKeyArgs = makeKeyArgs(38); const downKeyArgs = makeKeyArgs(40); const startArgs = makeKeyArgs(32);
 
 if (!Runner().playing) {
 
 Runner().onKeyDown(startArgs); setTimeout(() => {
 
 Runner().onKeyUp(startArgs); }, 500); }
 
 function conquerTheGame() {
 
 if (!Runner || !Runner().horizon.obstacles[0]) return;
 
 const obstacle = Runner().horizon.obstacles[0];
 
 if (obstacle.typeConfig && obstacle.typeConfig.type === 'SNACK') return;
 
 if (needsToTackle(obstacle) && closeEnoughToTackle(obstacle)) tackle(obstacle); }
 
 function needsToTackle(obstacle) {
 
 return obstacle.yPos !== 50; }
 
 function closeEnoughToTackle(obstacle) {
 
 return obstacle.xPos <= Runner().currentSpeed * 18; }
 
 function tackle(obstacle) {
 
 if (isDuckable(obstacle)) {
 
 duck(); } else {
 
 jumpOver(obstacle); }
 
 }
 
 function isDuckable(obstacle) {
 
 return obstacle.yPos == 75; }
 
 function duck() {
 
 drop(); Runner().onKeyDown(downKeyArgs);
 
 setTimeout(() => {
 
 Runner().onKeyUp(downKeyArgs); }, 500); }
 
 function drop() {
 
 Runner().onKeyDown(downKeyArgs);
 
 Runner().onKeyUp(downKeyArgs); }
 
 function jumpOver(obstacle) {
 
 if (isNextObstacleCloseTo(obstacle))
 
 jumpFast(); else
 
 Runner().onKeyDown(upKeyArgs); }
 
 function isNextObstacleCloseTo(currentObstacle) {
 
 const nextObstacle = Runner().horizon.obstacles[1];
 
 return nextObstacle && nextObstacle.xPos - currentObstacle.xPos <=
 
Runner().currentSpeed * 42; }
 
 function jumpFast() {
 
 Runner().onKeyDown(upKeyArgs); Runner().onKeyUp(upKeyArgs); }
 
 return {conquerTheGame: conquerTheGame}; }
 
let bot = TrexRunnerBot(); let botInterval = setInterval(bot.conquerTheGame, 2);