3.3 给页面添加测试脚本

在现实的工作中,我们往往会遇到一些问题在线上就会触发然后本地就触发不了的问题。或者是,要给某个元素写一个测试脚本。这个时候如果是浏览器有提供一个添加脚本的功能的话,那么我们的整个操作就方便多了。具体操作如下:

我们先来给自己定一个需求,我们要在博客园的tab面板上面添加一个弹窗,弹窗的内容为1

这个时候的操作如下:首先先把面板切换到Sources,然后再右侧中选中Snippets,接着点击New snippet来,添加的脚本如下:

$(".post_nav_block").on("click","li",function(){
alert(1);
})

[观察netWork中的加载,我们发现博客园使用了jquery,所以我们可以使用jquery的绑定事件,对于不存在jquery引入的网站,我们不能这样使用]

编写之后保存我们发现点击之后没有反应,其实这个脚本编写之后是需要运行才能够使用

右击选择run,只要不触发页面刷新,新加入的脚本是不会停止的,如果触发刷新就会停止脚本的运行,但是脚本还是存在。即使你关闭了浏览器,下一次打开还是存在这个脚本,除非你删除了这个脚本。

3.4  经典的断点调试

相信很多前端人员都应该挺熟悉断点调试的吧,不熟悉也没有关系,我们来整理一下。首先我们自己编写如下的一段测试代码:

<html>
<script>
var a=1;
var b=2;
console.log(b);
console.log(a);
</script>
</html>

断点如下:

如果我们要在断点3调到断点5,不经过断点4的话,我们可以使用左侧的按钮

如果要分别一次进行下去,只需要按下F10

如果有函数的话,要运行到函数内部,可以使用F11

其中是用来开启和关闭断点,当关闭断点后,所有的断点都会失效

选中变量,右击菜单选择Add selected text to watches把变量添加到右侧的watch面板,这样可以监控一个变量的当前情况。

重新编写一段测试代码:

 <script>
test1();
function test1(){
test2();
}
function test2(){
test3("this is test");
}
function test3(params) {
console.log(params);
}
var a=1;
alert(a);
</script>

然后在test3下面的console.log语句中打断点。

我们看下右侧的栈调用面板如下:

从而我们可以快速的定位到函数的栈调用情况

3.5 查看chrome插件的代码

chrome中的source提供了一种可以查看插件代码的功能,选中右侧中的Content scripts就可以看到了,如下:

具体的代码就可以将文件夹直接展开就可以了。

source模块的用法大致上也就是这些了。下一节将讲一讲chrome对性能分析上面的利用。

chrome调试工具高级不完整使用指南(基础篇)

chrome调试工具高级不完整使用指南(优化篇)

chrome调试工具高级不完整使用指南(实战一)

chrome调试工具高级不完整使用指南(实战二)

chrome调试工具高级不完整使用指南(实战二)的更多相关文章

  1. chrome调试工具高级不完整使用指南(基础篇)

    一.前言 本文记录的是作者在工作上面对chrome的一些使用和情况的分析分享,内容仅代表个人的观点.转发请注明出处(http://www.cnblogs.com/st-leslie/),谢谢合作 二. ...

  2. chrome调试工具高级不完整使用指南(优化篇)

    上一篇文章我们说了chrome调试工具的一些比较基础功能的用法,接下来我们要在这一篇文章中说一说,其他一些chrome调试工具的使用方法 2.1.5 Network模块 在netWork模块中,大致上 ...

  3. chrome调试工具高级不完整使用指南(实战一)

    三.chrome调试工具实战 3.1 获取界面对应的HTML和修改样式 我们以博客园为例子来分析. 通过上面的操作就可以定位到对应的HTML代码 左侧菜单显示的就是当前指定元素层叠样式的一个情况 上面 ...

  4. Chrome调试工具简单介绍

    作为前端开发者都知道,快捷键F12可以打开chrome调试工具.firefox可以打开firebug工具.“工欲善其事,必先利其器”,对调试工具的掌握,能大大提高我们调试代码的效率.因为我平常chro ...

  5. 高级Bash脚本编程指南(27):文本处理命令(三)

    高级Bash脚本编程指南(27):文本处理命令(三) 成于坚持,败于止步 处理文本和文本文件的命令 tr 字符转换过滤器. 必须使用引用或中括号, 这样做才是合理的. 引用可以阻止shell重新解释出 ...

  6. 不常见但很有用的chrome调试工具使用方法

    前面的话   对于chrome调试工具,常用的是elements标签.console标签.sources标签和network标签.但实际上,还有一些不太常见但相当实用的方法可以提高网页调试效率.本文将 ...

  7. Jenkins高级用法 - Jenkinsfile 介绍及实战经验

    系列目录 1.Jenkins 安装 2.Jenkins 集群 3.Jenkins 持续集成 - ASP.NET Core 持续集成(Docker&自由风格&Jenkinsfile) 4 ...

  8. 高级Bash脚本编程指南《Advanced Bash-Scripting Guide》 in Chinese

    <Advanced Bash-Scripting Guide> in Chinese <高级Bash脚本编程指南>Revision 10中文版 在线阅读链接:http://ww ...

  9. Xshell高级后门完整分析报告

    Xshell高级后门完整分析报告 from:https://security.tencent.com/index.php/blog/msg/120 1. 前言 近日,Xshell官方发布公告称其软件中 ...

随机推荐

  1. D01 Elon Mulsk The future we're building — and boring

    摘要:精选TED. 每个音频不超过2分钟,学英语和吸收伟大思想两不误 音频: https://n1audio.hjfile.cn/st/fb5ace6f-7b63-439d-954c-c4539c1f ...

  2. Lua代码提示和方法跳转

    前言 当在一个大型工程中编写大量的lua脚本时,代码提示和方法跳转等功能很实用,据我所了解的目前除LuaStudio之外,似乎还没有一个很好的编辑器.但今天讲述的是Idea +EmmyLua插件 达到 ...

  3. MQTT 简介

    MQTT 全称是 Message Queue Telemetry Transport,是一个轻量级的“发布/订阅”消息传输协议. 官网 http://mqtt.org/ 发布/订阅 MQTT 的基本概 ...

  4. Java对象转换成xml对象和Java对象转换成JSON对象

    1.把Java对象转换成JSON对象 apache提供的json-lib小工具,它可以方便的使用Java语言来创建JSON字符串.也可以把JavaBean转换成JSON字符串. json-lib的核心 ...

  5. CNN中的卷积操作的参数数计算

    之前一直以为卷积是二维的操作,而到今天才发现卷积其实是在volume上的卷积.比如输入的数据是channels*height*width(3*10*10),我们定义一个核函数大小为3*3,则输出是8* ...

  6. 【python】内部函数

  7. Linux简介,虚拟机安装,网络设置,桌面和vim安装

    Linux简介: linux代表系统内核.Linux系统指基于Linux内核的操作系统,由内核和程序结合组成.比较流行的发行版本由RedHat Linux.Fedora.Centos.Debian.U ...

  8. Charles 抓包工具使用部分问题总结

    一. You may need to configure your browser or application to trust the Charles Root Certificate. See ...

  9. SSH框架完全整合

    大三学期渐末,事情也挺多的,上周就开始着手整合SSH框架,到现在才真正的完成,过程中碰到了许多小问题(小问题大折腾,哭脸.jpg).本着善始善终的原则,最终把它给完成了. 本篇文章就在: win7 6 ...

  10. Error Running Git Empty git --version output:IDEA关联GitHub时出现这个错误

    刚刚学习使用idea中,想要把自己的项目上传到github,遇到这样一个问题,先记录下来,到时候解决了在把方法贴出来. ---------------------------------------- ...