一个写后台的人 有一天要自己找前台页面的错误 于是乎就得会前台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. Bootstrap 概览

    目录1.移动设备2.响应式图片3.Normalize4.Containers 1.移动设备在Bootstrap 3中,我们重写了整个框架,使其一开始就是对移动设备友好的.这次不是简单的增加一些可选的针 ...

  2. ora-24247 网络访问被访问控制列表ACL拒绝

    ,     upper_port  );   COMMIT; END; / --3.创建访问控制列表(ACL)network_services, BEGIN  DBMS_NETWORK_ACL_ADM ...

  3. linux su su -

    本人以前一直习惯直接使用root,很少使用su,前几天才发现su与su -命令是有着本质区别的! 大部分Linux发行版的默认账户是普通用户,而更改系统文件或者执行某些命令,需要root身份才能进行, ...

  4. (一)maven的安装

    Maven下载 下载地址:http://maven.apache.org/download.cgi 下载完成后,得到一个压缩包

  5. Makefile 调试

    一.简介 GNU make 提供了若干可以协助调试的内置函数以及命令行选项. 用来调试makefile 的一个最好方法就是加入调试挂钩以及使用具保护的编程技术,让你能够在事情出错时恢复原状. 二.ma ...

  6. （转）自制AutoMapper实现DTO到持久层Entity的转换

    原文地址:http://www.cnblogs.com/qidian10/p/3173907.html 项目中经常涉及到页面DTO更新,保存到数据库的操作,这就必然牵扯到DTO和持久层对象的转换,常见 ...

  7. 如何快速搭建基于python+appium的自动化测试环境

    首先申明本文是基本于Python与Android来快速搭建Appium自动化测试环境: 主要分为以下几个步骤: 前提条件: 1)安装与配置python环境,打开 Python官网,找到“Downloa ...

  8. Alpha冲刺（三）

    Information: 队名:彳艮彳亍团队 组长博客:戳我进入 作业博客:班级博客本次作业的链接 Details: 组员1(组长)柯奇豪 过去两天完成了哪些任务 ssm框架的使用并实现简单的数据处理 ...

  9. Python实现wc.exe

    github传送门 项目相关要求 基本功能 -c file.c 返回文件file.c的字符数 (实现) -w file.c 返回文件file.c的词的数目(实现) -l file.c 返回文件file ...

  10. DataType--时间类型

    SQL SERVER 存储时间的方式和存放浮点数的方式类似,存放时按照一定公式算出一个数值,存放到页面,在读取时按照公式求算出时间值,再按照默认或指定的时间格式展示给用户. 如果存放DATETIME数 ...