在Chrome开发者工具中编写js并运行

最新推荐文章于 2024-01-10 15:58:36 发布
最新推荐文章于 2024-01-10 15:58:36 发布
阅读量2k 收藏 3
点赞数 3
分类专栏： 前端进阶之路 文章标签： 前端 chrome chrome devtools javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34302201/article/details/109818492
版权

在Chrome开发者工具中编写js并运行

前言

今天记录一个小技巧，主要是在chrome开发工具中边编写js，边运行，学习效率大大提高~~
通常情况下，我们在网上学习或者找一些轮子的时候，经常要在本地创建一个临时的html,js文件，再把js引入相应的html文件中，用浏览器打开相应的html文件，改个js代码都要重新刷新一遍，想一想都很麻烦懒得动，久而久之，我就变成了看看党，光看不练习，效率低到不行。。。。

今天我在网上看一些大牛写的文档的时候，有很多很基础的东西，虽然看一眼就会的那种，但是想一想还是自己想明白，亲手实践一下比较好。但是我又不想重蹈覆辙，方法一是可以，但是效率低，我本人并不是很喜欢。所以我就想的是能不能直接在控制台创建一个临时的js文件，直接运行。所以今天的重头戏来了，，，废话不多说，直接上图

第一步 打开开发者工具

如下图所示：
在这里插入图片描述

第二步开始愉快的编写运行

在这里插入图片描述
有木有很方便~~~~~

总结

我是前端道路上的白的不能再白的小白，我觉得还是要多多探索一些！虽然这些知识很简单，但是不是每个人都知道的哈哈，所以记录一下~

爱跳舞的小猫
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Chrome浏览器修改网页前端JS代码（实现绕过）
墨痕诉清风的博客
07-01 342
但是，我们直接在这里修改是行不通的！因为浏览器一般都会已经在内存里加载了这段代码，要重新加载代码只能靠刷新，然而刷新会丢失我们所作的修改。因此，我们需要用其他的方法，更改浏览器内存中的这一段代码。首先，要想修改JS代码，那么我们首先就得找到有关限制部分的代码，而后对其进行编辑。然后，让我们以uploads-lab第一关为例子，来进行探究一下如何进行修改。刷新后依然是修改后的数据。
chrome扩展程序开发之在目标页面运行自己的JS
u014419512的专栏
05-15 3783
大家都知道JS是运行在客户端的，所以，如果我们自己写一个浏览器的话，是一定可以往下载下来的网页源代码中加入js的。可惜我们没有这个能力。不过幸运的是，chrome的扩展程序可以帮我们做到这件事。本文会做一个chrome插件开发的入门介绍，利用chrome扩展实现在目标网页运行我们的js的功能。关于chrome扩展的详细内容，可以通过官网了解。
在chrome浏览器中执行javascript
davidsu33的专栏
09-25 1万+
chrome浏览器中包含了开发者工具，chrome浏览器可谓是非常的强大啊，在chrome浏览器上F12就可以打开开发者模式。如下图所示： 下面给大家简单演示一下使用jquery登陆csdn，首先打开csdn的登陆页面，然后打开开发者工具，在控制台执行如下命令即可。 javascript:$("#username").val("你的用户名称");$("#password").val("
chrome控制台调试js
cherry_zhang18的博客
08-03 1768
方法/步骤 打开测试网址： f12 打开开发者工具： 控制台介绍： Elements：页面元素，可以进行编辑，保存后实时查看页面效果 Network： 查看js模拟的http请求，例如下图中修改购物车中商品数量，可以实时的看到请求地址，直接上图。点击请求地址，会把请求的头信息和响应信息等数据展示出来，此处非常便捷，展示样式比fire
chrome js 读取文件夹_求chrome 浏览器下用javascript读写txt文件的办法！
weixin_35060159的博客
12-24 2890
我已经经实现ie下的js文件读取求大牛帮改一下使程序在chrome下也能读写文件//读文件functionreadFile(filename){varfso=newActi...我已经经实现ie下的js文件读取 求大牛帮改一下 使程序在chrome下也能读写文件//读文件function readFile(filename){var fso = new ActiveXObject("Scripti...
利用chrome的javascript控制台，学习javascript和 jQuery
总长
12-03 918
部分为转载 1、javascript学习 打开chrome的javascript控制台 在Console下输入命令即可。 2、jQuery学习 1）首先引入jQuery库，在google提供的库即可。 在Console下输入 var fileref=document.createElement('script') fileref.setAttribute("
DHC插件(REST/HTTP API Client - Chrome开发者工具插件)
01-12
通过在浏览器中直接集成API调用功能，DHC使得开发者无需离开熟悉的Chrome开发者工具环境，就能方便地发送GET、POST、PUT、DELETE等各种HTTP请求，并获取响应结果。 这款插件的核心特性包括： 1. **多请求管理**：...
JS开发者工具箱
06-09
总的来说，"JS开发者工具箱"是前端开发者提高生产力的利器，它不仅提供了Chrome DevTools的基础功能，还增加了许多实用工具和特性，让开发者在编写和调试JavaScript代码时更加得心应手。无论是初学者还是经验丰富的...
vue调试代码开发者工具
04-16
Vue.js Devtools是一款专为Vue.js开发者设计的强大工具，它作为一个Chrome浏览器扩展，允许开发者在浏览器的开发者工具中深入地检查、调试和修改Vue应用程序。这个工具极大地提升了开发和调试Vue项目的效率，使得...
Chrome.DeveloperTools.AddTagIDs:一个 Chrome 扩展程序，它通过 Chrome 的开发者工具向被检查页面上的所有 HTML 标签添加唯一的 HTML 标签标识符
06-25
总结来说，Chrome Developer Tools AddTagIDs 是一个实用的 Chrome 扩展，它利用 JavaScript 为网页上的每个 HTML 标签添加唯一的 ID，以协助开发者在 Chrome 开发者工具中更有效地进行元素定位和调试。了解并使用这...
开发者工具Sublime Text、chrome.docx
10-02
而Chrome的开发者工具提供了查看网络请求、分析资源加载、调试JavaScript等功能，帮助开发者识别和修复可能的安全隐患，如XSS攻击、CSRF攻击等。 在教育领域，将Sublime Text和Chrome作为开发者工具引入高中理科...
如何使用chrome快速实现js想法
田永威的专栏
03-18 169
很多时候不想新建一个文件去实现一些很小的功能 想在浏览器中直接改变当前浏览页面的样式或者获取一些内容 1.在chrome snippets中写是最快的，不用创建文件还能进行断点调试 2.更重要的是自己的控制能力，也就是你掌握技能的多少，想操作dom你要知道如何获取dom元素吧。等等。 如何使用原生javascript操作dom和bom(文档对象模型和浏览器对象模型)？？
简单使用Chrome的开发者工具调试JS代码
weixin_38382659的博客
06-06 4665
简单使用Chrome调试JS代码调试区 Sources 面板打断点调试源代码条件断点各种情况下的断点格式化被压缩的JS代码打印某个变量或表达式的值直接修改JS代码 调试区 Sources 面板 打开Chrome 左边是各种文件资源 中间是对应文件内容的显示区域 右边是进行调试操作的区域 这些是调试区的按钮，从左到右以此是 暂停/执行 ，单步执行，单步跳入，单步跳出，禁用/启用有断点 打断点...
JavaScript如何运行
热门推荐
weixin_43048780的博客
02-24 1万+
项目场景： 一些小伙伴刚入手前端开发，对Javascript十分陌生，下面就专门总结运行js文件的几种常用方法。 一、Node.js Node.js 就是运行在服务端的 JavaScript。Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。 1.下载 官网：https://nodejs.org/en/ 2.安装 安装非常方便，一路点next就好，最好安装在c盘，其他盘在使用中可能会遇到麻烦，亲测！！！
Chrome浏览器中JavaScript的运行
xiaoyi9812的博客
01-03 1814
Chrome是谷歌开发的网页浏览器，对于调试代码来说非常方便，下面是具体步骤。
[JavaScript] 第六章 Chrome 浏览器中执行 JavaScript
最新发布
Java 技术专栏，从入门到精通，熟悉企业级开发
01-10 4388
在Chrome浏览器中，可以使用开发者工具的调试功能来调试和执行JavaScript代码。以下是一些常用的调试技巧：设置断点、单步执行、监视变量、控制台调试、异常处理。这只是一些Chrome浏览器调试功能的例子。要打开开发者工具并访问调试功能，你可以按下Ctrl + Shift + J（Windows / Linux）或Command + Option + J（Mac），或者在浏览器菜单中选择"更多工具" > “开发者工具”，或者在页面上点击鼠标右键选中【检查】。
使用chrome开发者工具调试JavaScript代码的三种常用方法
就是喜欢JAVA
04-07 8842
对 JS 程序的调试，除了在 JS 程序中使用 alert()、console.log() 方法跟踪和调试代码外，开发人员也会经常使用一些调试工具。最常用的 JS 调试工具就是一些主流的浏览器的调试工具，如 IE11 浏览器的“开发人员工具”、Firefox 浏览器的“Firebug”工具或较新版本的“开发者>>Web 控制台”以及 Chrome 浏览器的“开发者工具”。 限于篇幅的原因，本节将只介绍 Chrome 浏览器的“开发者工具”调试工具，IE 浏览器的“开发人员工具”和 Firefox
如何在 Chrome 中执行 JavaScript 代码
村雨遥
03-01 7924
你虽然知道怎么用 Chrome 上网，但你知道怎么用 Chrome 执行 JavaScript 代码么?
使用Chrome开发者工具注入Javascript实现额外功能
Hoxily的窝窝
03-13 1万+
Chrome开发者工具介绍 在Chrome或Chromium浏览器里按下组合键Ctrl+Shift+I会打开开发者工具. Elements标签页，可以查看、编辑DOM元素。 Network标签页，上可以查看HTTP请求以及回复报文的详信息，包括HTTP回应码、POST时提交的表单等。Sources标签页，设断点调试时会跳到这里。当在js脚本里加debug关键字设置断点时，会用到。Time
开发者工具devtools的原理
09-04
### 回答1： DevTools（开发者工具）是一组工具，可以帮助开发者更轻松地构建、调试和优化网络应用程序。它们可以帮助开发者更快地识别和解决问题。DevTools还可以让开发者实现更多的功能，比如实时预览和检查网页布局，查看网络请求和资源，以及更快地调试 JavaScript 代码。 ### 回答2： 开发者工具（DevTools）是现代浏览器提供的一个功能强大的工具集，用于在开发和调试网页时进行查看、分析和修改。 DevTools的工作原理可以大致分为以下几个步骤： 1. 嵌入到浏览器中：开发者工具是以插件或扩展的形式嵌入到浏览器中的，提供给开发人员使用。用户可以通过浏览器的菜单或快捷键打开开发者工具。 2. 与浏览器建立通信：开发者工具与浏览器建立通信渠道，通过该通道获取当前页面的DOM结构、CSS样式和JavaScript运行情况等信息。 3. 查看页面结构：开发者工具中的“元素”面板可以显示当前页面的DOM结构，开发者可以在该面板中查看并编辑HTML标签、属性和样式。 4. 调试JavaScript代码：开发者工具中的“控制台”面板可以提供一个JavaScript的运行环境，开发者可以在该面板中编写和调试JavaScript代码，查看代码执行的结果和错误信息。 5. 分析网络请求：开发者工具中的“网络”面板可以查看当前页面发送的网络请求，包括请求的URL、请求方法、请求头和响应内容等信息，方便开发者分析页面加载和数据传输的性能问题。 6. 性能分析和优化：开发者工具中的“性能”面板可以用于分析页面的加载性能，并提供诸如JavaScript性能和内存使用情况的详细报告，帮助开发者进行优化。 7. 其他功能：开发者工具还提供了诸如查看和调试页面的样式、查找和替换文本、模拟设备和网络等功能，帮助开发者进行更全面和高效的调试和开发。 总之，开发者工具通过与浏览器建立通信渠道，获取并展示当前页面的各种信息，为开发者提供了丰富的调试和分析功能，帮助他们更好地开发和优化网页。 ### 回答3： 开发者工具（DevTools）是一种集成在浏览器中的工具，用于帮助开发人员在开发和调试网页时进行分析、监控和修改。DevTools的原理涉及以下几个方面。 首先，DevTools与浏览器紧密集成，可以直接访问浏览器中的内部数据结构和功能接口。通过与渲染引擎（如WebKit或Chromium）的通信，DevTools能够获取DOM树结构、CSS样式表、JavaScript堆栈信息等页面相关的数据信息。 其次，DevTools利用浏览器的调试接口（如Chrome的Chrome DevTools Protocol）与浏览器进行通信。这些接口提供了许多底层功能，例如获取网络请求的详细信息、监测性能指标、执行JavaScript代码、模拟用户行为等。DevTools可以通过发送命令和接收响应来与浏览器进行交互，以实现对页面的分析和修改。 还有一些与开发者工具密切相关的技术，例如断点调试和代码审查。开发者工具可以在页面中设置断点，当特定条件满足时，自动中断JavaScript的执行，并提供调试信息和堆栈跟踪，帮助开发人员定位问题。此外，开发者工具还提供了代码审查功能，用于分析和修改页面的HTML、CSS和JavaScript代码。 总之，开发者工具的原理是通过与浏览器内部通信，获取页面的各种数据信息，并提供操作界面和调试功能，以帮助开发人员进行网页开发和调试。开发者工具的实现依赖于浏览器的内部结构和接口，以及相关的调试和审查技术。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值