一个写后台的人 有一天要自己找前台页面的错误 于是乎就得会前台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. Windows下查询指定端口进程，并杀死

    1. 找到指定端口的进程号 c:\devworks\lib\httpd-2.4.10-win32-VC9\Apache24\bin>netstat -ano|findstr "9000 ...

  2. ms project设置行高

    1.取消某列的自动换行右击“任务名称”——自动换行 2.全选所有任务点击左上角单元格 3.设置所有行的行高点击任意行最左边单元格的下边框,向上拖放 4.ok

  3. php扩展开发环境搭建

    首先要安装编译php时要的几个扩展库 (1)libxml2,若无php安装一些解析xml的扩展时会提示xml2-config not found sudo apt-get install libxml ...

  4. Eclipse导入tomcat服务器

    创建server

  5. 获取文件的后缀名。phpinfo

    1: function get_extension($file){ //strrchr 返回 .jpg substr :1 是从1开始. substr(strrchr($file,'.'),1) } ...

  6. hp警告Creating default object from empty value 问题的解决方法

    hp警告Creating default object from empty value 问题的解决方法 解决方法是找到报错的位置然后看哪个变量是没有初始化而直接使用的,将这个变量先实例化一个空类.如 ...

  7. 安全、结构良好的jQuery结构模板

    安全.结构良好的jQuery结构模板 ;(function($,window,document,undefined){ //我们的代码- })(jQuery,window,document);   参 ...

  8. spark源码阅读之network(1)

    spark将在1.6中替换掉akka,而采用netty实现整个集群的rpc的框架,netty的内存管理和NIO支持将有效的提高spark集群的网络传输能力,为了看懂这块代码,在网上找了两本书看< ...

  9. Mybaties原理图

  10. 浅谈Android内存管理

    最近在网上看了不少Android内存管理方面的博文,但是文章大多都是就单个方面去介绍内存管理,没有能全局把握,缺乏系统性阐述,而且有些观点有误,仅仅知道这些,还是无法从整体上理解内存管理,对培养系统优 ...