一个写后台的人 有一天要自己找前台页面的错误 于是乎就得会前台debug 于是乎我不会 就在网上找了一些资料看  不就是几个按钮 嘛 有啥难的  上图片

1.Google 浏览器 F12 就可以看到 前台调试工具啦

2.调试按钮

3.按钮的快捷键 及 作用

　Debugger(调试面板)
  • F8  or  Ctrl + \: 暂停/继续
  • F10  or  Ctrl + ': 单步执行
  • F11  or Ctrl +;: 单步进入
  • Shift + F11  or Ctrl + Shift+;: 单步退出
  • Ctrl +./Ctrl+, : 上一帧/下一帧(译为框架怪怪的)
  • Ctrl +Shift+E: 被选中代码在控制台中打印出console信息(非常实用)
  • Ctrl + Shift + A: 添加到debugger的watch里面,可以关注你选中内容的变化
  • Ctrl + B: 打断点/取消断点(很实用)
 
 4.快快自己动手试试  挺好玩的哈
 
欢迎各位道友吐槽哟  @@@@@@@@@@@@@@@@@@@@@@
 
 
 

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

  1. nodejs 使用Google浏览器进行可视化调试——Node Inspector工具

    1.npm安装Node Inspector工具,全局安装 命令行执行npm install -g node-inspector 2.启动Node Inspector工具,命令行执行 node-insp ...

  2. 彻底解决Google浏览器CSS居中问题

    div做的界面时,又出现CSS hack(CSS兼容浏览器问题)在IE内核浏览器或者firefox浏览器中都能居中,没有居中的可以用其特殊标签来设定居中,如下划线 _ IE6优先识别,!importa ...

  3. 下载Google浏览器（Google Chrome）离线安装包方法

    Chrome浏览器默认是在线安装的,但由于网络的原因,有时很久也不能完成安装.其实Chrome官方是提供离线安装包的.具体地址如下: 稳定版:http://www.google.com/chrome/ ...

  4. google 浏览器使用技巧（一）

    google 浏览器使用技巧(一) google 浏览器使用技巧 1. 调整地址栏的宽度 当安装多个插件的时候,默认插件会隐藏,所以使用起来很麻烦.在chrome 浏览器的配置中没有找到相应的配置.一 ...

  5. 利用Google浏览器调试js代码

    1.js有两种引入方式,外链和内嵌: 内嵌在浏览中直接调试,外链要在断点处写debugger; 示例代码: <!DOCTYPE html> <html lang="en&q ...

  6. Google浏览器解决编码乱码问题

    新版google浏览器编码乱码没有设置的入口,怎么办呢?. 步骤一: 可以下载goole的插件,名为charset,下载后的文件名为Charset_v0.4.1 步骤二: google右上角-> ...

  7. Google浏览器——AxureRP_for_chorme_0_6_2添加

    准备 链接:https://share.weiyun.com/5PVwSMA Google浏览器版本 步骤 压缩解压 首先把需要安装的第三方插件,后缀.crx 改成 .rar,然后解压,得到一个文件夹 ...

  8. ubuntun 18.04 安装google浏览器

    ---恢复内容开始--- 一:下载谷歌浏览器镜像源 sudo wget http://www.linuxidc.com/files/repo/google-chrome.list -P /etc/ap ...

  9. kali安装Google浏览器之后的问题

    kali中,在安装完Google浏览器后会出现点击图标却打不开的问题,解决方式如下: 2019-04-10  09:46:00

随机推荐

  1. get-task-allow有什么用

    [failed to get the task for process问题] A: Why am I getting "Error launching remote program: fai ...

  2. Linux Resin4.0 安装配置

    Resin,是一个非常流行的application server,对servlet和JSP提供了良好的支持,性能优良,resin自身采用Java语言开发.Resin Pro版本支持缓存和负载均衡,收费 ...

  3. 中国大学MOOC 玩转AutoCAD 熟悉AutoCAD的人机交互方式

  4. linux top 命令各参数详解

    简介 top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器. top显示系统当前的进程和其他状况,是一个动态显示过程,即可以通过用户按 ...

  5. 带你剖析WebGis的世界奥秘----瓦片式加载地图（转）

    带你剖析WebGis的世界奥秘----瓦片式加载地图 转:https://zxhtom.oschina.io/zxh/20160805.html  编程  java  2016/08/05 0留言,  ...

  6. 银行家算法之JavaScript实现

    上学期有个课程叫做操作系统,期末的时候这课程还有个课程设计,其中有个题目叫做银行家算法. 什么是银行家算法我就不解释了! 看着同学们的设计,大同小异甚至前篇一律. 清一色的控制台程序,清一色的蛋疼输入 ...

  7. ubuntu在命令行下同步时间

    1. 修改 /etc/timezone的时钟为UTC时钟. echo "Asia/Shanghai" > /etc/timezone 2.修改时区 $sudo cp /usr ...

  8. PHP解决跨域访问的问题

    在控制器的第一行放如下代码即可解决 header('Access-Control-Allow-Origin: http://ding.taozugong.com'); header('Access-C ...

  9. tomcat的内存配置，关于-Xms -Xmx -XX:PermSize -XX:MaxPermSize的理解和区别

    JVM按照其存储数据的内容将所需内存分配为堆区与非堆区两个部分:所谓堆区即为通过new的方式创建的对象(类实例)所占用的内存空间:非堆区即为代码.常量.外部访问(如文件访问流所占资源)等.然而虽然ja ...

  10. 《Andorid开源》greenDao 数据库orm框架

       一 前言:以前没用框架写Andorid的Sqlite的时候就是用SQLiteDatabase ,SQLiteOpenHelper ,SQL语句等一些东西,特别在写SQL语句来进行 数据库操作的时 ...