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

这个就是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. Wise Registry Cleaner Pro(智能注册表清理) V9.31 绿色版

    软件名称: Wise Registry Cleaner Pro(智能注册表清理)软件语言: 简体中文授权方式: 免费试用运行环境: Win7 / Vista / Win2003 / WinXP 软件大 ...

  2. linux操作数据库

    1.显示数据库 show databases; 2.选择数据库 use 数据库名; 3.显示数据库中的表 show tables; 4.显示数据表的结构 describe 表名; 5.显示表中记录 S ...

  3. 2015 QQ最新登录算法

    首先还是取得验证码,抓包可得:http://check.ptlogin2.qq.com/check?regmaster=&pt_tea=1&uin=2630366651&app ...

  4. underScore学习1:匿名函数中call(this)的作用

    匿名函数中(function(){}).call(this) 中的.call(this) 有什么用? 我们都知道,.call()可以改变函数执行时的context,即this的指向,源码中的.call ...

  5. curl的简单使用步骤

    要使用cURL来发送url请求,具体步骤大体分为以下四步: 1.初始化2.设置请求选项3.执行一个cURL会话并且获取相关回复4.释放cURL句柄,关闭一个cURL会话 // 1. 初始化一个cURL ...

  6. Codeforces Round #346 (Div. 2) A Round-House

    A. Round House 题目链接http://codeforces.com/contest/659/problem/A Description Vasya lives in a round bu ...

  7. JavaScript动态加载资源【js|css】示例代码

    在开发过程中会用到各种第三方的插件,或者自己写在单独文件中的js方法库或者css样式,在html头部总是需要写一大堆的script和link标签,如果想要自己实现动态的引入资源文件,可以使用开源的re ...

  8. 分布式版本控制系统Git-----1.Git 初识

    开始工作咯,师傅让我开始学习Git.刚接触我是懵逼的,"分布式版本控制系统"啥玩意啊这是,大家可不能从字面意思上理解啊,刚开始,版本控制么,我以为是团队合作的时候把开发工具.JDK ...

  9. bigdecimal使用

    float和double类型 一般用于科学计算,用于金融的都用bigdecimal类型.在项目中浮点型数据没有指定 默认是double类型.bigdecimal的构造参数有浮点型和String类型.但 ...

  10. CodeForces 702B Powers of Two

    简单题. 开一个$map$记录一下每个数字出现了几次,那么读入的时候$f[a[i]]+1$. 计算$a[i]$做出的贡献的时候,先把$f[a[i]]-1$,然后再枚举$x$,答案加上$f[{2^x} ...