首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

利用f12开发者工具在线调试网站js

在很多时候,我们可能需要调试前端js,但是如果非本地项目,根本没法直接修改js进行调试,但是我们可以利用浏览器开发者工具,进行修改js并调试  首先我们随便找一个网站: https://www.easyswoole.com.../Preface/intro.html 打开f12,点击sources,点击overrides: ?...点击 select folder for overrides ,选择一个本机文件夹做浏览器文件映射: 将会弹出允许获得文件访问权限弹窗,点击确认 ? 将显示: ?...在soures中找到你需要修改js文件: ? 由于很多代码都会进行压缩,所以我们可以先点击上面的prety-print进行格式化: ? 将格式化代码全选复制,复制到原有js中: ?...现在,我们加点自己东西,比如console.log("仙士可牛逼"); ? 点击ctrl+s或者右键菜单保存: ? 直接刷新页面,浏览器将从本地加载此js文件: ?

4K10

浏览器F12开发者调试工具) 功能介绍

+Shift+C)进入选择元素模式,然后从页面中选择需要查看元素,然后可以在开发者工具元素(Elements)一栏中定位到该元素源代码具体位置 。...查看元素属性:可从被定位源码中查看部分,如class、src,也可在右边侧栏中查看全部属性,如下图位置查看 修改元素代码与属性:可直接双击想要修改部分,然后就进行修改,或者选中要修改部分后点击右键进行修改...右边侧栏个功能介绍:如下图所示 控制台(Console) 查看JS对象及其属性 执行JS语句 查看控制台日志:当网页JS代码中使用了console.log()函数时,该函数输出日志信息会在控制台中显示...响应状态码、请求头和响应头及它们各自值、请求参数等等 Preview:预览面板,用于资源预览。...Response:响应信息面板包含资源还未进行格式处理内容 Timing:资源请求详细信息花费时间 打开浏览器,按F12,点击Network,可以查看相关网络请求信息,记得是打开F12之后再刷新页面才会开始记录

4.1K31
您找到你想要的搜索结果了吗?
是的
没有找到

深度好文| 如何用好效率工具?(下)

道法术器 在《现在 | 数字时代工具》 中,我们对现代工作知识结构从四个维度做了介绍,这也是我们首次引入道法术器概念: 知识结构 = 通用知识 + 领域知识 + 具体经验 + 工具技能 通用知识...,针对特定事务具体执行经验,如工作流程和注意事项,类似枝干 ️ 工具技能:器 即具体事务执行过程中,所需要用到所有具体技能和具体工具,如协作技能和创作工具 notion,类似花叶和果实。...,将抽象流程发展为可复用材料 器之器为执行:执行就是不可再分工具操作过程 注:对于工具具体操作是原子化,但是工具本身却不一定,比如上述模型、框架、流程、模板、工具都可以被视为不同类型和层次工具...术则是微观器,是人们所完成任务和完成任务所使用工具,是实现道、法、术具体手段。 在上述公司中,具体工作任务和使用工具就是器。...: 图片源于效率工具实训营课程专栏 上述拆分还可以不断进行,但考虑到实用性,我们便不再继续深入,在后续效率工具课程中,我们将基于此4*4模型,对相关领域和工具进行拆解和介绍,确保读者深入理解和使用工具

12110

如何用好项目管理工具

项目管理工具,就是来解决这些问题,项目跟进,提高工作效率。 一个好团队,必然有项目管理工具。蝉小队纯银就强烈推荐了tower,一个轻量级项目管理工具。...当然还有别的项目管理工具,本质上都差不多,今天不推荐工具,简单说说团队成员应该怎么用好这个工具。...怎么做 1.每天更新项目进度 一般大家都有周报,或者周例会,但是这样项目跟进周期太粗了。建议做法是每天下班前,大家总结下今天进展和明天计划。...这样,即使最终这件事确实无法执行,也有足够证据证明结论合理性。如果做了什么尝试没法说清楚,则很容易让人觉得是你能力问题。...不过建议用更好办法–主动申请加班,按时完成这个任务。特别是职场新人,或者新到一家公司,这样做法在短期内就很容易帮你建立“主动、积极、有能力”个人形象。

94820

Linux 实用好命令工具

本文链接:https://blog.csdn.net/sunboy_2050/article/details/100670753 Linux 实用好命令工具 w(who)、nomn、ncdu、iftop...、findmnt、htop、ccze、glances 原文图片,请见原文米扑博客:Linux 实用好命令工具 1、w (who) 对,你没看错,就是 w 命令,其用法跟 who 类似 使用该命令我们可以查看到当前登录系统用户是谁...ncdu 命令可以用来查看和分析 Linux 中各目录对磁盘空间占用情况工具。...4、iftop 需要手动安装:yum install iftop -y iftop是一款实时流量监控工具,监控TCP/IP连接等,缺点就是无报表功能,必须以root身份才能运行。...是一个 Linux 内置命令行工具,不需要安装了,它主要用于查找挂载文件系统状态。

72551

程序员必备工具网站用好了节省你大把编程时间

我真的拿出我收藏最最最实用工具网站来给你们了。 ? 相信很多人不光是在编程过程中,在平时生活中,也经常会收藏一些有用网站,方便使用时候,靠这些网站来解决一些麻烦事情。...做过爬虫程序员都知道,我们在分析网页文件请求时,会在开发者工具里查看浏览器请求过来文件。 ?...五、在线时间戳转换工具 在线时间戳转换工具:https://tool.lu/timestamp/ 这个网站功能就显而易见了,我就不多做解释了。 ?...之所以推荐这个网站,是因为这个对js加密保护可以被浏览器识别,而有些网站加密是无法被浏览器识别的。 ? 有很多种版本可以使用,跟着网站上显示步骤来,就能明白是如何使用了。...当然了,该网站还有很多其他有用在线工具可以使用,例如密码随机生成 、在线二维码生成 、URL编码 等等。 ?

99320

APP冷启动优化:如何使用好工具【Perfetto systrace MethodTracing】

,个人认为是工具用好性能分析工具,性能提升就走完了一大半,就好比:”算数我比不过小王,但我找了个电子计算器“。...冷启动定义与可优化如何衡量当前性能指标,个人感觉,性能衡量分三步: 指标制-> 指标采集 -> 性能基线与优劣评级, 以上三块组成性能量化工具,有了量化工具,就可以说APP性能是好是坏,以冷启动为例...如何定位当前性能问题 冷启动每个阶段耗时可以通过多种工具、方式来定位:可以用有Debug.startMethodTracing跟踪,也可以利用perfetto/systrace来查看,甚至还可以用Studio...总结 BUG是必然,优化是持久如何用好工具是关键。...作者:看书小蜗牛 原文链接: APP冷启动优化:如何使用好工具【Perfetto\ systrace \MethodTracing】

2.2K41

如何用好抓包工具wireshark?装好插件最为重要!

Wireshark是一款开源抓包软件,同时该软件能够显示很多常见通用协议,是因为内置了常见协议解析器。 没错Wireshark就是依靠解析器来分析各种报文。...这些就是wireshark缺省携带通用解析器。wireshark除了支持dll方式插件装载,也支持LUA文件插件装载。...LUA是一个简单化轻量级类似python语言,主要用于可扩展性程序,wireshark对其有一些些自定义语法函数规范。...在本文附件中,本人上传了H3C目前采用标准做解析器,主要目的是方便问题排查和报文解读,存在部分字段暂时值格式问题,不过不妨碍使用理解。...有能力有兴趣 还可以参考上诉官方文档和我附件插件给其他协议做同样类比方法,希望通过这款软件能更快更准确帮助一些网络问题理解。

3.9K20

网站资源:分享7个实用好在线网站,值得收藏!

今天给大家分享7个非常实用科技网站,感兴趣朋友可以尝试一下。...网址:https://www.gaituya.com/ps/ 2、VisuWords 在线英语学习网站 这是一款很棒在线交互式英语单词学习网站,非常适合学习英语比较困难朋友。...网址:https://www.yijianyuankong.com/remote/ 4、网格纸生成器 这是一个支持在线设定和打印网格纸工具,支持点、线、正方形、横线、六边形等不同图案设置并打印到A4...网址:https://www.blobmaker.app/ 6、FUUN.FUN 一个有趣网站 FUUN.FUN从名字就可以看出来就是一个专门搜罗有趣好玩内容网站,收藏这一个在线网站等同于拥有了一大堆有趣好玩网站...网址:https://fuun.fun/ 7、文叔叔 在线文件传输神器 这是一款可以将任意文件,快速、安全传给你朋友超实用工具,即使不注册账号也能快速跟朋友分享文件;并且发送、下载文件不限速,注册登录后有

2K30

如何用好 GitHub 中 Watch、Star、Fork

这篇博客,结合自己理解和使用,说说这三个按钮用法以及一些个人见解。 如下图所示这是我们经常看到三个按钮。 ? 从左至右,依次是 Watch Star Fork,下面分别说下他们具体作用。...issue等等情况,你都会在自己个人通知中心,收到一条通知消息,如果你设置了个人邮箱,那么你邮箱也可能收到相应邮件。...另外这里有一篇文章讲《如何正确接收 GitHub 消息邮件》,很不错一篇文章,推荐大家看看。...然后就静静等待他 merge 邮件通知了。 我看到很多人错误在使用 fork。很多人把 fork 当成了收藏一样功能,包括一开始使用 github 我,每次看到一个好项目就先 fork。...,你可以回答别人提出问题,这是一个很好学习成长方式。

5.2K100

网站F12显示一个有趣 console.log 信息

Console 信息就是在大多数浏览器里面按下 F12 之后看到内容(用 console.log 输出),例如百度: 一张网页,要经历怎样过程,才能抵达用户面前?...给人有种 F12 小惊喜感觉,虽然百度是用它来招聘,我们未尝不能做点其他。 这个小功能我觉得蛮有趣,实现起来也很简单,一段小代码就行。...实现方法就是将以下代码添加到footer.php即可,按下 F12 或右键审查元素,找到 Console 就能看到效果,内容自己改哦。...; } 效果看本博客按下 F12 以后 Console 信息哦~懒得按就看题图吧~ 沈唁志|一个PHPer成长之路!...原创文章采用CC BY-NC-SA 4.0协议进行许可,转载请注明:转载自:网站F12显示一个有趣 console.log 信息

2.3K30

如何扫描网站漏洞?都有哪些扫描工具

这种方法最适合在入侵大型公司网站时候使用!...入侵时思维拓展 有时候我们获得了目标网站管理员密码,但是又找不到后台,这是可以试下用FTP登陆,例如,目标网站是”www.xxxx.cn “ 得到密码为“bishi”,我们就可以试下用“xxxx”...入侵时获得管理员名称 有时候在入侵类似于新闻发布网网站时,注入得到了管理员密码,但是拿不到管理员名称,网站上也没有论坛什么,这时候该怎么办呢?...扫web绝对路径 众所周知,在入侵asp.net网站时,我们首先就是在aspx文件前加上一个“~”来尝试扫出web绝对路径,但在入侵用ASP+IIS架设网站时能不能用呢?...一码不扫, 何以扫天下 RECOMMEND 推荐阅读 微信版“花呗”要来了,大家准备好了吗? 抓包工具tcpdump使用方法 THE END 感谢您抽出 · ?

4.9K50

如何使用Chrome开发者工具检查网页故障

假设你登录以下网址时遇到故障无法登录: https://demo.xswitch.cn/admin.html 用Chrome浏览器(微软Edge浏览器也类似)打开上述网址,按F12键,或右键点击网页,然后选择...【审查元素】菜单,将会出现类似下面的图,下面就是Chrome开发者工具区域。...我界面是英文,因此我尝试中英文都进行说明。 切换到【网络】(Network)选项卡,如果能看到很多网址,则最好点一下左起第二个图标(箭头指向)清除一下,这样看着比较清爽。...上图中403就是密码不对。...本文主要是以排查XSwitch登录问题为例讲解Chrome Devtools使用方法,步骤和思路适用于任何跟浏览器相关问题。

1.5K20

如何用好KE02 内部EEPROM

最近有几个项目用是NXP KE02片子这个芯片内部自带256字节EEPROM,可以用来存一些参数,和密码,但是操作时候要注意,EEPROM地址是0x10000000-0x100000FF, 所以我们所有的参数要存在这个地址范围...我们使用SDK函数编写一个简单例子,可以测试下如上图所示,写进EEPROM和从EEPROM 相应地址读出来是一样,可以在掉电测试,都是没有问题,需要注意就是每次写操作要一次四个字节,可以利用...IDE观察调试读写数据。...这里需要提醒一点是在正式产品中,因为片内EEPROM寿命是有限,不能频繁操作EEPROM, 可以对EEPROM块进行分成小块,按块操作,这样可以相当于延长了EEPROM寿命。

54330

工具】Java开发者必备六款工具

每一位Java程序员都会有套工具来应对工作上挑战。多年来,Java程序员使用软件来完成他们工作。有很多工具对他们是有用,不过对于初入行的人员来说,寻找合适工具是困难,并且是浪费时间。...而今天我们将列出六款Java程序员必备工具。 ? Notepad++ Notepad++是用于编辑xml、脚本以及记笔记最佳工具。...Notepad++是一款非常有特色编辑器,是开源软件,可以免费使用。 ? 2. XML Marker XML Marker工具对Java程序员来说是非常重要。它可以帮助开发者更好完成工作。...SQL Developer 这是一款针对数据库管理员免费工具,你可以使用这款工具链接数据库和SQL语句。它功能不像Toad那样多,但是对你而言已经足够使用了。...幸运是,Eclipse附带了一个标准插件集,包括Java开发工具。 ? 6.Keytool Keytool是Oracle JDK一部分。

1.5K40

使用 Chrome 开发者工具研究一个基于 Angular 开发网站源代码

Chrome 开发者工具是前端开发工程师工具箱里使用频率最高工具之一。 本文通过一个具体例子,给大家分享笔者工作中,是如何通过 Chrome 开发者工具,分析一个网站实现明细。...下图这个网站,是乐高成功使用 SAP Spartacus 开发并上线在线购物店面(阿联酋地区): 大家仅凭视觉效果,能分辨出这两个网站,实际上都是基于同一个 UI 框架开发出来吗?...然而我们在 Chrome 开发者工具 network 里观察,发现服务器返回给浏览器初始页面里,app-root 节点内是空,这说明当前我这次访问场景是客户端渲染,即浏览器收到服务器发送仅仅包含空...因此,当我们浏览器里打开乐高购物网站时,Chrome 开发者工具里能观察到发向该 API Endpoint 一个 HTTP 调用。...Chrome 开发者工具里打开 main.js 代码块,里面包含了 Lego Spartacus 项目二次开发项目构建后生成 JavaScript 代码。

83830
领券