Chrome - 浏览器家园

Web性能优化：缓存 React 事件来提高性能

这是Web性能优化的第三篇，上一篇在下面看点击查看：Web性能优化：使用Webpack分离数据的正确方法Web性能优化：图片优化让网站大小减少62%JavaScript中一个不被重视的概念是对象和函数是如何引用的，并且直接影响React性能。如果创建两个完全相同的函数，它们仍然不相等，试试下面的例子：constfunctionOne=function(){alert('Helloworld!');};constfunctionTwo=function(){alert('Helloworld!');

时间：2023-06-27人气：77
一个简单的chrome拓展程序开发

最近突然觉得有些常用的功能可以写成浏览器插件，就不用把代码放到console控制台运行了。只要点击插件图标就可以自动运行。会方便很多。就去查了下chrome插件开发教程。本质上讲，chrome插件就是以一些特殊的方式运行一些特定的html,css,JavaScript代码，前端同学们学起来还是很容易的。比较好的中文的参考资料：1.360翻译的文档：http://open.chrome.360.cn/ext…2.Chrome扩展及应用开发：http://www.ituring.com.cn/mi

时间：2023-06-27人气：82
实现一个简单的chrome插件

我们在上网的时候，都会用到浏览器，但是浏览器并非拥有我们想要的所有功能，我们可以根据自己的需要，实现自己的插件来满足需求。比如网页中经常会有大量的广告，如果你希望拥有一个纯净的网页，可以实现一个插件来删除网页中的广告部分，如果你觉得浏览器自带的下载工具不太方便，可实现一个插件来管理下载的所有文件，文本以实现一个记录所有打开的网页地址为例，分享一下对浏览器插件开发的认识。要实现一个浏览器插件，需要从一个配置文件开始，这个配置文件就是manifest.json文件，任何插件的实现都离不开这个JSON格式的文件

时间：2023-06-27人气：98
20个Chrome DevTools调试技巧

译者按： ChromeDevTools很强大，甚至可以替代IDE了！原文: ArtofdebuggingwithChromeDevTools译者: Fundebug为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习。小编推荐：Fundebug专注于JavaScript、微信小程序、微信小游戏，Node.js和Java线上bug实时监控。真的是一个很好用的bug监控服务，众多大佬公司都在使用。谷歌开发者工具提供了一系列的功能来帮助开发者高效Debug网页应用，让他们可以更快地查

时间：2023-06-27人气：91
你可能不知道的Chrome-devtools用法总结

文章同步于 Githubblog前言作为一名前端从业者，Chrome-devtools是最常用的工具之一。以前一直还觉得自己的这一块还是比较熟悉的，结果偶然看到了Chrome-devtools的文档之后，才发现还有这么多强大、炫酷，但是相对冷门的用法，觉得有必要来一次梳理和总结。持续更新中……常用快捷键在Mac上使用 Cmd+Shift+C) 在审查模式下打开开发者工具或是在开发者工具已经打开的情况下开启查阅选项。在Source选项，Cmd+o(MacOSX)可以搜索文件，Cmd+

时间：2023-06-27人气：65
可视化爬虫配置chrome插件开发之搭建vue开发环境

使用vue开发chrome插件的好处本次开发的插件是抓取配置插件，有很多的form表单以及弹出层，如果纯使用js的话会有很多动态创建dom的操作。使用vue和ES6的import语法以及webpack的html加载器相配合，可以减少大量动态创建dom的代码。vue环境搭建工作准备请安装node.js（新版自带npm包管理工具）建议安装cnpm淘宝镜像，安装依赖的时候会更快一些#-g安装在全局registry指定国内下载地址$npminstallcnpm-g--registry=https://regist

时间：2023-06-27人气：82
Chrome 远程调试协议分析与实战

背景某一天，A君想获取Chrome页面中的性能数据，诸如时间、白屏和首屏等，因为需要和竞品进行对比分析，无法注入代码，该怎么办？此时，你也许能想到开发者工具(DevTools)，也许知道Timeline(包含浏览器完整的行为数据)，该怎么自动获取到Timeline数据呢？开发者工具开发者工具(DevTools)是一个独立的Web应用程序(HTML+CSS+Javascript)，被集成在浏览器中，通过远程调试协议(remotedebuggingprotocol)和浏览器内核进行交互，直接使用Ctrl+Sh

时间：2023-06-27人气：72
在windows上编译chrome浏览器Building Chromium for Windows

web端用webRTC实现的一对一视频，互动直播和会议。https://github.com/starrtc/an…ChromiumrequiresVisualStudio2017(15.7.2)tobuild.错误：Exception:VisualStudioVersion2017(fromGYP_MSVS_VERSION)notfound.安装“使用C++进行桌面开发”组件和“MFC和ATL支持”子组件。您必须安装版本10.0.17134Windows10SDK。可以通过选中VisualS

时间：2023-06-27人气：93
Chrome DevTools — Console

前端开发人员离不开Chrome开发者工具，它又这么好用，不好好学习掌握一下它的使用，实在有点明珠暗投啊，本篇先来讲述Console有关的使用。Overview打开Console开发者工具里面，我们平常使用的大都是这种面板形式，暂且称之为“主面板”：还有一种显示形式，就像一个抽屉（官方文档称之为“drawer”）一样存在于主面板之上，可以上下拖动，靠在主面板的底部，本文称之为“副面板”：console面板有这两种显示形式，平时测试一些js代码时可能都会选用主面板，因为主面板空间大，视野清晰，查看代码方便。但

时间：2023-06-27人气：90
写一个 Chrome 扩展之 Flat Weibo —— 简洁你的微博世界

0x00.前言微博现在也是变得越来越臃肿，广告越来越多，早已不再是“微”博了，这让微博深度用户的我感到十分焦灼。由于之前就尝试写过Chrome插件，于是便想到了这样的解决方案。FlatWeibo，简洁你的微博！0x01.概览去除两边的各种推荐去除部分广告重置顶部导航样式修改背景修改微博流样式其他0x02.下载安装下载Chrome应用商店百度云安装由于Chrome目前禁止第三方插件的安装，所以需在Chrome里依次点击菜单更多工具扩展程序然后打开开发者模式，将插件拖进来然后会自动安装。安装成功后插

时间：2023-06-27人气：100
Google Chrome中的高性能网络 (三)

使用预连接优化了TCP连接管理已经预解析到了主机名，也有了由OmniBox和ChromePredictor提供信号，预示着用户未来的操作。为什么再进一步连接到目标主机，在用户真正发起请求前完成TCP握手呢？这样就可省掉了另一个往返的延迟，轻易地就能为用户节省到上百毫秒。其实，这就是TCP预连接的工作。通过访问chrome://dns 就可以看到TCP预连接的使用情况。首先,Chrome检查它的socketpool里有没有目标主机可以复用的socket，这些sockets会在socketpool里保留一段时

时间：2023-06-27人气：83
动手写一款简单的chrome天气插件

极简天气一款简单的chrome天气插件。github https://github.com/yohnz/weather如图：创建文件新建weather文件夹，里面包含manifest.json，popup.html和images文件夹。images文件夹放16,48,128三种不同尺寸的图标manifest.json内代码如下：{"manifest_version":2,"name":"极简天气","description":"极简天气预报","version":"1.0",

时间：2023-06-27人气：77
用 Chrome 调试你的 JavaScript

写在前面：文章是ChromeDevTools介绍系列的一部分，查看全部文章可以关注Github上的 ChromeDevTools详解，也可以关注这个系列所在的项目：front-end-study。在Chrome中调试JS代码，那你不得不与ChromeDevTools的Sources面板打交道，所以文章主要通过介绍Sources面板上的各部分功能来介绍如何调试网页中的JS。熟悉Sources面板先来认识一下Sources面板(以我的Github首页举例)。可以看到面板被分为左中右三个部分，左边是文件导航，中

时间：2023-06-27人气：79
用Chrome headless和puppeteer做一个妹子图爬虫

首先奉上链接代码#!/usr/local/bin/node/***@author:vanishcode*@desc:hahahaha,fuckyou,ADs!*/constpuppeteer=require('puppeteer');constaxios=require('axios');constfs=require('fs');varcurrentNumber=1;asyncfunctionrun(url){console.log('Starttocrawlgirl'spivtures

时间：2023-06-27人气：72
关于Chrome Devtools你可能有所不知的几个技巧

CoolChromeDevToolstipsandtricksyouwishyouknewalready在Elements面板中拖拽元素在Elements面板移动HTML元素，和UE沟通时快速预览效果。之前我只知道可以删除元素?。在Console面板中获取当前选中的元素首先在Elements面板选中一个元素，然后在Console面板中输入$0回车。如果你的前端项目有使用jQuery，还可以使用$($0)进一步使用jQuery的API函数。在Console面板中操作上次表达式的结果在Console的执行上下

时间：2023-06-27人气：75
ChromeSnifferPlus 可以探测正在使用的开源软件或者JS类库

ChromeSnifferPlusChromeSnifferPlus：Chrome探测器，可以探测正在使用的开源软件或者js类库，开发者必备。通过本插件，您可以探测：javascript库：jQuery、ExtJS、Angular等。常用的web服务：百度统计、cnzz、GoogleAnalytics等。Web框架：WordPress、phpBB、Drupal、MediaWiki等。服务器环境：PHP、Apache、nginx等。当你安装此插件去浏览网页时，还可以发现更多你未知的框架和库。如果你发现了还不

时间：2023-06-27人气：83

首页上一页 273 274 275

本类导航

推荐文章

文章排行