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 ...
随机推荐
- Springboot实体类转JSON报错Could not find acceptable representation & 设置访问项目根路径的默认欢迎页面
=================实体类转JSON报错的解决办法============= 之前在springmvc的时候也报过这个错,原因以及springmvc中解决办法参考:https://www ...
- linux 安装matlab
转自: https://www.cnblogs.com/Amedeo/archive/2018/06/03/9129925.html 一.下载“Crack”和”ISO”文件 下载地址如下所示:http ...
- 统计分析与R软件-chapter2-3
2.3 对象和它的模式与属性 R是一种基于对象的语言,R的对象包含了若干个元素作为其数据,另外还可以有一些特殊数据称为属性,并规定了一些特定操作(如打印.绘图).比如,一个向量是一个对象,一个图形也是 ...
- pt-table-sync 使用方法【转】
28. pt-table-sync28.1 pt-table-sync 作用 使用对两个库不一致的数据进行同步,他能够自动发现两个实例间不一致的数据,然后进行sync操作,pt-table-sync无 ...
- python骚操作之...
python中的Ellipsis对象.写作:- 中文解释:省略 该对象bool测试是为真 用途: 1.用来省略代码,作用类似于pass的一种替代方案. from collections.abc imp ...
- 用while实现阶乘
题目描述: 用while语句求1!+2!+3!+...+10! #include<iostream> #include<cstdio> using namespace std; ...
- 036_lua应用扩展
一.request_id定义 ## # request id ## lua_package_path '/opt/nginx/conf/lua/lib/?.lua'; init_by_lua ' uu ...
- HDU 1102
最小生成树 对于必须要加入的边, 让其边权为0 即可 Prim : #include<iostream> #include<cstring> #include<cstdi ...
- 【原创】大叔经验分享(37)CM清理磁盘空间
定期清理cloudera manager server的磁盘空间 1 停止Service Monitor和Host Monitor 2 删除日志 # /bin/rm /var/lib/cloudera ...
- Python-数据库 基本SQL语句
1. 数据库是什么 2. MySQL安装 3. 用户授权 4. 数据库操作 - 数据表 - 数据类型 - 是否可以为空 - 自增 - 主键 - 外键 - 唯一索引 数据行 增 删 改 查 排序: or ...