废话不多说,给大家介绍一下最基本的浏览器调试工具

这个就是chrome浏览器的调试界面,怎么调出来大家都知道吧

第一个箭头是,选择元素,激活后,在页面中鼠标移动到那地方,下面的Elements窗口会自动移动到相应的代码段

第二个手机就是切换到手机界面

1.Elements是显示页面代码的窗口

2.console是浏览器控制台,可以直接在里面写js代码

3.Sources是调试窗口,这里用的最多的就是断点调试了

两种断点

普通断点

条件断点

注意:是i==50;如果是i=50就是赋值运算了

监视窗口

可以选中变量后右键add to watch

在一种方法就是直接在wtach窗口添加

最后介绍的一个就是请求的窗口

这个窗口会保存所有请求的数据

这个是可以限速的,可以测试页面在不同的网速下打开的速度

直接点开下面的请求可以查看请求的详细信息

chrome浏览器调试工具的使用的更多相关文章

  1. chrome浏览器调试工具你会使用吗？

    浏览器调试工具使用总结 一. console使用 console.table(),可以把对象输出成表格的形式,直观的观察数据. console.dir(),可以直观观察dom元素的对象形式 二. $的 ...

  2. Chrome浏览器 调试工具 vue-devtools 的安装和使用

    https://www.cnblogs.com/yuqing6/p/7440549.html

  3. Rest Client(Rest接口调试工具，有保存功配置功能) chrome浏览器插件

    Rest Client(Rest接口调试工具,有保存功配置功能) chrome浏览器插件 下载地址 插件的操作很简单,下面是一些简单的实例. 1.安装 在谷歌应用商城搜索postman,如下图1-1所 ...

  4. 谷歌chrome浏览器vue调试工具vue-devtools的安装

    先导 vue-devtools是一款基于chrome浏览器的插件,用于vue应用的调试,这款vue调试神器可以极大地提高我们的调试效率.帮助我们快速的调试开发vue应用. 第一步: 我们可以先从git ...

  5. Chrome浏览器超强调试工具

    原文:http://lizanhong2011.blog.163.com/blog/static/18028516720117301312729/ 在Google Chrome浏览器出来之前,我一直使 ...

  6. java selenium (四) 使用浏览器调试工具

    在基于UI元素的自动化测试中, 无论是桌面的UI自动化测试,还是Web的UI自动化测试.   首先我们需要查找和识别UI元素. 在基于Web UI 自动化测试中, 测试人员需要了解HTML, CSS和 ...

  7. chrome浏览器扩展--QQ群查看器(1)

    QQ群查看器--chrome浏览器扩展 源码及程序下载地址:http://pan.baidu.com/share/link?shareid=3636190804&uk=1678089569 关 ...

  8. 禁止Chrome浏览器缓存的方法

    web开发的人经常chrome和firefox作为开发调试工具,有些时候需要禁止chrome浏览器缓存,最近也用到禁止缓存,以下介绍几种禁止chrome浏览器缓存的方法作为记录. HTML: < ...

  9. 【转载】如何让Chrome浏览器允许本地环境支持Ajax

    转载自:http://www.bewxx.com/news/news_89.html 对于网站前端人员来说,我们在本地开发程序的时候如果用到Ajax的话,通常会使用Firefox来测试,因为Firef ...

随机推荐

  1. php函数搜集

    数组去重: 方法1:php自带此功能的函数array_unique($arr) 方法2:$arr = array_flip(array_flip($arr)); //这样便可以删除重复元素. 比上面的 ...

  2. 打印机服务器搭建 -cups

    系统:ubuntu 14.04 http://foo2zjs.rkkda.com/INSTALL 安装cups   sudo apt-get install cups 安装完成后,把打印机的数据线与服 ...

  3. redis11--java_jedis-test

    使用Java开发项目的时候使用Redis的话,目前有一些开源API可以使用.最常用的就是jedis,它提供了许多基于Java的对象和方法来调用Redis的指令.jedis的jar包下载地址http:/ ...

  4. MySQL数据库传输BLOB类型数据丢失 解决办法

    修改MySQL安装目录下my.ini文件配置:

  5. mysql innodb存储引擎和myisam引擎

    InnoDb存储引擎面向在线事务处理,其特点是行锁设计.支持外键.并支持Oricle似得非锁定读(所谓非锁定读是如果数据库实例读取的行正在进行更新或删除操作当前读取不会等待当前锁的释放而是读取当前行的 ...

  6. 添加JUnit到Java Build Path

    1.第一种 新建项目,点击右键,选择properties->Java Build Path->Libraries->add library->JUnit->JUnit4- ...

  7. Linux使用rsync客户端与服务端同步目录进行备份

    一.服务端设置 1. 修改 server 端配置 # vi /etc/rsyncd.conf 修改: uid = nobody # 该选项指定当该模块传输文件时守护进程应该具有的uid.默认值为&qu ...

  8. HDU 5831 Rikka with Parenthesis II

    如果左括号数量和右括号数量不等,输出No 进行一次匹配,看匹配完之后栈中还有多少元素: 如果n=2,并且栈中无元素,说明是()的情况,输出No 如果n=2,并且栈中有元素,说明是)(的情况,输出Yes ...

  9. hdu 3440 House Man

    差分约束系统 例如, 5 6  20 34 54 10 15  这一组测试数据 先编号,分别为1 2 3 4 5 ,然后可以写出一组表达式,两个编号之间的距离必定大于等于1的,所以i+1到i建立有向边 ...

  10. node读写json文件（进阶）

    该方法可用于修改配置文件,直接上代码 fs.readFile('test1.json','utf8',function (err, data) { if(err) console.log(err); ...