Chrome开发者控制台操作教程
1清空控制台
在控制台下有个clear console的按钮,点击的时候会清空控制台。
清空控制台
2让Chrome中的页面可编辑
有的时候我们需要临时改变页面上的文字,图案等信息,一种常见的方法是打开Elememts,然后在修改页面的源码,这种做法比较麻烦。如果需要修改多处,需要频繁的修改源码。
而通过Chrome的控制台Console中,只需要下面一句简单的代码就可以使得整个页面变得可编辑(划重点)。
document.body.contentEditable=true
变成可编辑的代码
实际的效果图如下所示。
3.格式化代码
在Chrome控制台的Source面板下,我们可以查看到页面的源文件,包括js,css,img等。但是有些网站经常会将js或者css文件进行压缩,对开发人员来说不友好,如果想要查看的话通过点击一个按钮,就可以轻松实现代码格式化。
3.console代码
1、console.log 用于输出普通信息
2、console.info 用于输出提示性信息
3、console.error用于输出错误信息
4、console.warn用于输出警示信息
5、console.debug用于输出调试信息
7、console.group输出一组信息的开头
8、console.groupEnd结束一组输出信息
12、console.time 计时开始
13、console.timeEnd 计时结束
Chrome开发者控制台操作教程的更多相关文章
- [转]谷歌Chrome浏览器开发者工具教程—基础功能篇
来源:http://www.xiazaiba.com/jiaocheng/5557.html Chrome(F12开发者工具)是非常实用的开发辅助工具,对于前端开发者简直就是神器,但苦于开发者工具是英 ...
- Chrome 开发者控制台中,你可能意想不到的功能
Chrome 有内置的开发者工具.它拥有丰富的特性,比如元素(Elements).网络(Network)和安全(Security).今天,我们主要关注一下 JavaScript 控制台. 当我最初写代 ...
- 使用 Chrome 开发者工具进行 JavaScript 问题定位与调试
转自:https://www.ibm.com/developerworks/cn/web/1410_wangcy_chromejs/ 引言 Google Chrome 是由 Goole 公司开发的一款 ...
- Chrome 开发者控制台使用技巧
Chrome 有内置的开发者工具.它拥有丰富的特性,比如元素(Elements).网络(Network)和安全(Security).今天,我们主要关注一下 JavaScript 控制台. 当我最初写代 ...
- HTTP入门(二):用Chrome开发者工具查看 HTTP 请求与响应
HTTP入门(二):用Chrome开发者工具查看 HTTP 请求与响应 本文简单总结HTTP的请求与响应. 本文主要目的是对学习内容进行总结以及方便日后查阅. 详细教程和原理可以参考HTTP文档(MD ...
- Chrome开发者工具不完全指南:(三、性能篇)
卤煮在前面已经向大家介绍了Chrome开发者工具的一些功能面板,其中包括Elements.Network.Resources基础功能部分和Sources进阶功能部分,对于一般的网站项目来说,其实就是需 ...
- Chrome开发者工具不完全指南(四、性能进阶篇)
前言 Profiles面板功能的作用主要是监控网页中各种方法执行时间和内存的变化,简单来说它就是Timeline的数字化版本.它的功能选项卡不是很多(只有三个),操作起来比较前面的几块功能版本来说简单 ...
- Chrome开发者工具不完全指南(五、移动篇)
前面介绍了Chrome开发者工具的大部分内容工具,现在介绍最后两块功能Audits和Console面板.一.Audits Audits面板会针对目前网页提出若干条优化的建议,这些建议分为两大类,一类是 ...
- Chrome开发者工具详解(5)-Application、Security、Audits面板
Chrome开发者工具详解(5)-Application.Security.Audits面板 这篇文章是Chrome开发者工具详解这一系列的最后一篇,介绍DevTools最后的三个面板功能-Appli ...
随机推荐
- python,类和对象(二),self 、__init__(self,param[,param...])、__private(私有变量)
当我们在类中定义方法的时候,总会看到会第一个参数总是self,是的这个是python的一个语法,他相当于这个对象的指针. class Dog(): def setName(self,name): se ...
- python小练习,利用dict,做一个简单的登录。
'''利用字典实现登录'''users=[{'username':'jerry','pwd':'123456'},{'username':'tom','pwd':'1'}] def login(use ...
- python三大神器
Python 中有很多优秀的包,本文主要讲一下 pip, virtualenv, fabric 1. pip 用来包管理 文档:https://pip.pypa.io/en/latest/instal ...
- java知识点3
高级篇 新技术 Java 8 lambda表达式.Stream API. Java 9 Jigsaw.Jshell.Reactive Streams Java 10 局部变量类型推断.G1的并行Ful ...
- Mysqli扩展类
Mysqli 扩展是需要php5.0版本以上的支持 主要有以下的3个类 MySQLi类,基本操作 MySQL_STMT类,预处理操作 MySQLi_RESULT类,结果操作 Mysqli的编写有两种方 ...
- dubbo源码分析1——SPI机制的概要介绍
插件机制是Dubbo用于可插拔地扩展底层的一些实现而定制的一套机制,比如dubbo底层的RPC协议.注册中心的注册方式等等.具体的实现方式是参照了JDK的SPI思想,由于JDK的SPI的机制比较简单, ...
- windows下django1.7 +python3.4.2搭建记录1
python+django在linux下搭建比较简单,windows下搭建比较复杂,所以列在下方一.下载安装下载django的包,到刚解压后的Django-1.7目录下执行命令 python setu ...
- svn更新出现冲突的解决方法
Conflict discovered in '/Users/apple/EtaxiAppServer/common/src/com/yaotaxi/db/MongoDBHelper.java'. S ...
- cocos2dx 3.x 修改NDK_ROOT、ANDROID_SDK_ROOT、ANT_ROOT路径
CMD到setup.py目录 Python setup.py -h 查看帮助: Options: -h,--help showthis help message and exi ...
- 利用HBuilder将vue项目打包成移动端app
事先准备,开发完成的web app项目(也可以利用vue-cli脚手架构建vue模板项目),npm run dev可以正常预览的项目 1,将项目目录下config文件内index.js中assetsP ...