一个写后台的人 有一天要自己找前台页面的错误 于是乎就得会前台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. Spring整合web项目原理

     

  2. JQuery实现瀑布流页面

    views.py from django.shortcuts import render,HttpResponse from app01 import models import json # Cre ...

  3. Java中long和Long的区别

    Java的数据类型分两种: 1.基本类型:long,int,byte,float,double,char,short,boolean 2. 对象类型(类): Long,Integer,Byte,Flo ...

  4. 1-如何自己在eclipse上配置Andriod环境

    转载:http://blog.csdn.net/dr_neo/article/details/49870587 最新鲜最详细的Android SDK下载安装及配置教程 2015年11月16日 19:2 ...

  5. CF 961G Partitions

    推不动式子 我们考虑每一个$w_i$对答案的贡献,因为题目中定义集合的价值为$W(S) = \left | S \right |\sum_{x \in S}w_x$,这个系数$\left | S \r ...

  6. 使用pycharm运行调试scrapy

    摘要 Scrapy是爬虫抓取框架,Pycharm是强大的python的IDE,为了方便使用需要在PyCharm对scrapy程序进行调试 python PyCharm Scrapy scrapy指令其 ...

  7. 在Windows 8上安装SQL Server2012

    SQL Server 2012 的安装方法跟2008差不多,基本上都是点击下一步,不过在安装的时候可能会进度条一直停留在“正在启动操作系统功能”NetFx3””处不动,出现这个问题的原因是在Windo ...

  8. Django框架 之 Cookie、Session整理补充

    Django框架 之 Cookie.Session整理补充 浏览目录 Django实现的Cookie Django实现的Session 一.Django实现的Cookie 1.获取Cookie 1 2 ...

  9. 1.python系统性能信息模块之psutil模块

    Psutil(进程和系统实用程序)是一个跨平台的库,用于在Python中检索有关运行进程和系统资源利用率(CPU,内存,磁盘,网络)的信息.它主要用于系统监视,分析和限制系统资源及运行进程的管理.它实 ...

  10. Controlling Session Behavior in Asp.Net MVC4

    Posted By : Shailendra Chauhan, 06 Jan 2013 Updated On : 11 Jun 2014 By default, Asp.Net MVC support ...