作者:余博伦链接:https://zhuanlan.zhihu.com/p/22665710来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. Chrome自带开发者工具.它的功能十分丰富,包括元素.网络.安全等等.今天我们主要介绍JavaScript控制台部分的功能. 我最早写代码的时候,也就是在JS控制台里输出一些服务器返回的内容,或者一些变量的值.但是后来通过一些深入的学习和了解,我发现Chrome的JS控制台原来还有这么多神奇的功能. 在这里我总结了一些特别有

精简的前言: 对,我就是想说下事情的来龙去脉.您要不想听,就把耳朵捂起来23333. 想截个新冠肺炎病毒,全国确诊人数今日增长的图,以确定非湖北地区不再明显增长. 但由于网页需要的内容分布在两页,需要滚轮截图,微信自带的截图没法实现. 所以找到了此法,Chrome 自带的 Capture Node Screenshot  截屏,谁用谁香. 整体步骤: Devtool 选中 Node Ctrl + Shift + P(Mac 上 Command + Shift + P) Capture Node

天啦噜!原来Chrome自带的开发者工具还能这么用! (提升JS调试能力的10个技巧)   Chrome自带开发者工具.它的功能十分丰富,包括元素.网络.安全等等.今天我们主要介绍JavaScript控制台部分的功能. 我最早写代码的时候,也就是在JS控制台里输出一些服务器返回的内容,或者一些变量的值.但是后来通过一些深入的学习和了解,我发现Chrome的JS控制台原来还有这么多神奇的功能. 在这里我总结了一些特别有用的功能.要是你凑巧在Chrome里浏览这篇文章的话,现在就打开开发者工具,跟着

Chrome自带开发者工具.它的功能十分丰富,包括元素.网络.安全等等.今天我们主要介绍JavaScript控制台部分的功能. 我最早写代码的时候,也就是在JS控制台里输出一些服务器返回的内容,或者一些变量的值.但是后来通过一些深入的学习和了解,我发现Chrome的JS控制台原来还有这么多神奇的功能. 在这里我总结了一些特别有用的功能.要是你凑巧在Chrome里浏览这篇文章的话,现在就打开开发者工具,跟着随手试试吧! 1.选取DOM元素 要是你用过两天jQuery的话,一定对 $('.class

一:背景 通常情况我们调试移动端页面最常用的方法就是:切换pc端浏览器的userAgent来模拟手机或其他移动设备调试页面 然后用手机打开要调试的页面 刷新页面查看调试结果 但是这就存在两个问题 在pc浏览器模拟手机可能造成调试不准 用手机直接调试 又多一步刷新 那怎么能达到在pc端修改代码 在手机上直接看到修改结果这样的所见即所得的效果呢 chrome做到了 二.功能 我们先看下最终想要达到的效果 上图的 左边是pc端的chrome 浏览器, 右边是手机上的chrome 然后可以看到当鼠标移动

一:背景通常情况我们调试移动端页面最常用的方法就是:切换pc端浏览器的userAgent来模拟手机或其他移动设备调试页面 然后用手机打开要调试的页面 刷新页面查看调试结果 但是这就存在两个问题 在pc浏览器模拟手机可能造成调试不准 用手机直接调试 又多一步刷新 那怎么能达到在pc端修改代码 在手机上直接看到修改结果这样的所见即所得的效果呢 chrome做到了 二.功能 我们先看下最终想要达到的效果 上图的左边是pc端的chrome浏览器,右边是手机上的chrome 然后可以看到当鼠标移动到某个d

苦B的前端每次在制作和修改页面时,都有一个特定的三部曲:coding-save-F5.很多时候都希望自己一改东西,页面就能立刻显示,而现在LiveReload就能做到这点. LiveReload会监控你指定的目录中文件,如果有文件被更改,它就自动触发浏览器刷新页面.但如果你修改的是CSS或者图片,页面内容会即时 更新,无需重新加载.这样我们不用每次修改文件后,都要去按下F5刷新页面,而是直接就能显示,有点类似所见即所得的编辑模式,特别适合使用双屏 coding的人.另外同时结合Sublime t

很多Web前台开发者都喜欢这种浏览器自带的开发者工具,这对前台设计.代码调试很大帮助的. Chrome浏览器得益于其优秀的V8解释器,javascript执行速度和内存占有率表现非常优秀.对于html+css+javascript前台技术的学习或者开发,浏览器developer tool的使用时必不可少的,也能极大的提高学习或者开发效率.本文根据版本 23.0.1271.10.在window下,开启developer tool的快捷键为F12. 1 Developer tool功能结构 Deve

一.前言 提起Chrome扩展插件(Chrome Extension),每个人的浏览器中或多或少都安装了几个插件,像一键翻译.广告屏蔽.录屏等等,通过使用这些插件,可以有效的提高我们的工作效率:但有时候,我们想要的某个功能市面上没有现成的插件,作为开发者自然而然想到,自己是否可以动手开发一个定制化的插件?网上目前很多不错的关于Chrome插件的开发教程,可以帮助我们快速上手开发一个插件, 本文换个思路,从应用着手,通过讲解插件的特性来启发读者在工作中哪些场景可以通过插件来解决. 本文侧重点不是C

李华西,微医云服务团队前端开发工程师,喜欢瞎折腾,典型猫奴 Console 面板 此章节请打开 devtools/console/console.html 一起食用 一方面用来记录页面在执行过程中的信息(一般通过各种 console 语句来实现),另一方面用来当做 shell 窗口来执行脚本以及与页面文档.DevTools 等进行交互 组合快捷键按键: Windows: Control + Shift + J Mac: Command + Option + J 首先看一下 console 对象下

我在写插件时用到了 onresize 事件,在反复地测试后发现该事件在 Chrome 及 Opera(内核基本与 Chrome 相同,以下统称 Chrome)浏览器打开时就会执行,这种情况也许不能算作 bug 吧,估计他们的工程师认为浏览器打开时也算窗口发生了变化.解决问题之前我搜索了相关内容,确实有关于 Chrome 的 onresize 的问题,但跟我遇到的问题还有很大不同.我把这个问题抽象为以下函数: function init() { alert('a'); window.onresiz

今天为大家分享一下我自己制作的浏览器滚动条,我们知道用css来自定义滚动条也是挺好的方式,css虽然能够改变chrome浏览器的滚动条样式可以自定义,css也能够改变IE浏览器滚动条的颜色.但是css只能是改变IE浏览器的颜色,而且CSS不能做到改变火狐浏览器的样式和颜色.所以只能是通过JavaScript来实现了.也有插件可以做到.我分享一下我自己使用原生JavaScript实现的思路.先上个图看下效果: JavaScript实现的思路就是模拟浏览器自身滚动条.我制作的思路是先将整个文档放在一

Chrome出了个小bug:论如何在Chrome下劫持原生只读对象 概述 众所周知,虽然JavaScript是个很灵活的语言,浏览器里很多原生的方法都可以随意覆盖或者重写,比如alert.但是为了保证网页的安全性和网页制作者的一定控制权,有些浏览器对象是无法更改的,比如"window.location"对象,或者对它们的更改是无效的,比如"window.navigator"对象.然而,最近我发现Chrome出现了一个小"bug",在Chrome

chrome的新标签页的8个缩略图实在让人不爽,网上找了一些去掉这个略缩图的方法,其中很多已经失效.不过其中一个插件虽然按照原来的方法已经不能用了,但是稍微变通一下仍然是可以用的(本方法于2017.1.7可用). 1. 安装扩展Stylish 2. 打开Stylish并且新建一个样式 3. 为新样式取一个名字并输入下面样式代码: [id="most-visited"]{display:none} 4. 选择选项 "网址",并且在后面的地址栏输入网址: https:/

谷歌Chrome,是当前最流行且被众多web开发人员使用的浏览器.最快六周就更新发布一次以及伴随着它不断强大的开发组件,使得Chrome成为你必备的开发工具.例如,在线编辑CSS,console以及debugger这些常用的调试技术,或许你已经了解.在本篇文章中,我们将介绍15个炫酷且实用的技巧,这将更快的提高你的开发效率. 该篇博客原文地址:http://www.cnblogs.com/giggle/p/5966991.html 一.快速查找文件 如果你使用过Sublime,那么你会知道’Go

Chrome插件是令人惊讶的简单,一旦你弄懂它的工作和实现原理.它是由一部分HTML,一部分Js,然后混合了一个叫做manifest.json的Json文件组合而成的整体.这意味着你可以使用你最擅长的js框架去实现它. 如果你还是一个Chrome插件的新手并且想尝试写一个的话,下面的文章将会带领大家并且尝试让大家理解Chrome插件的工作机制.这篇文章将会讲述每一块架构,以及相互之间的联系和插件的一般化形式. 架构 Chrome插件中的文件大体上可以分成2部分:Chrome插件中确确实实存在的文

首先大家可以去这个地址下载 Postman_v4.1.3 这个版本,我用的就是这个版本 http://chromecj.com/web-development/2014-09/60/download.html 下载完以后以后加压大概就是这个模样,其中.crx是我们要执行的文件,红色框里的叫私有秘钥文件 此时不能直接拖拽到谷歌浏览器的扩展程序界面,如果你直接把.crx文件拖拽到扩展程序的界面会有如下错误提示,说只能通过谷歌浏览器的 网上应用商店添加该程序,为什么会出现该情况呢? 是因为自 Chro

这个小问题也确实困扰我许久,后来看到chrome吧里面有人给出了解决方案: 安装install_flash_player_ppapi, 该软件下载地址:http://labs.adobe.com/downloads/flashplayer.html  下载windows的第三个. 然后刚刚看到chrome新版本将html5取代flash成为默认选项...那以后是不是就没有flash播放器了?

2-3年前在做客户端开发时,看过CHROME的一部分代码,主要是BASE库相关的.其项目之大,编译时间之长给我留下了深刻的印象. 3年后的最近,想着再读一下其他部分的代码,所以就对其纠结的下载和编译过程做下总结. 网上的一些文章都是比较过时的,按照那些文章的做法基本没啥戏.其实,仔细阅读chromium中关于Get Source Code页面的说明就能开耍了.现在的整个流程要比之前的流程感觉清晰多了. 我的环境是WIN7 SP1 + VS2013 UPDATE4.最新的chrome代码引入了一些

原文请访问个人博客:chrome拓展开发实战:页面脚本的拦截注入 目前公司产品的无线站点已经实现了业务平台组件化,所有业务组件的转场都是通过路由来完成,而各个模块是通过requirejs进行统一管理,在灰度测试时会通过grunt进行打包操作,虽然工程化的开发流程已经大大提升了效率,但是为了满足不同平台在任意业务入口页面一键注入业务脚本即可进行测试的实际需求,团队尝试通过chrome拓展来进行实现.由于我本人是第一次开发chrome拓展插件,所以开发的过程中遇到不少坑,某些功能的实现方式也未必是最