Google Chrome 作为程序员最常用的一款网页浏览器，凭借其强大的插件系统而广受赞赏，程序员作为上面一批最会折腾的用户，自然也不免俗的会在上面胡乱折腾出一些沙雕插件。...而这其中，有不少插件代码还开源并托管到 GitHub 上。 今天抽空跟大家分享下，我曾看过的那些比较沙雕的 Chrome 插件。...之后，在短短数月内，该游戏瞬间火爆各大社交网络，成为 2014 年最受欢迎的手游之一，当时我身边不少朋友的手机上都安装了这款游戏。 一款爆品的诞生，往往也伴随着一些赝品的争相模仿。...该游戏由电子科技大学的一名学生所研发，通过在 Chrome 上安装这款游戏，你便可以在 GitHub 上的 commit 强愉快的玩耍章鱼猫小游戏。 可以说是非常有创意了。...没关系，装上这款插件，就可以把你电脑上的网页微信伪装成云笔记，让你神不知鬼不觉地上微信了。 伪装到这地步，可以说真的很丧心病狂了。
原因就出在浏览器需要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转链接， 此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作...ios可以，android不行~ IE10（winphone8）表单元素默认外观如何重置 禁用 select 默认下拉箭头 ::-ms-expand 适用于表单选择控件下拉箭头的修改，有多个属性值，...select::-ms-expand { display: none; } 禁用 radio 和 checkbox 默认样式 ::-ms-check 适用于表单复选框或单选按钮默认图标的修改，同样有多个属性值...禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片 .css{-webkit-touch-callout: none} 禁止ios和android用户选中文字 .css{-webkit-user-select...的默认触摸事件 winphone下默认触摸事件事件使用e.preventDefault是无效的 目前解决方法是使用样式来禁用 html{-ms-touch-action: none;}/* 禁止winphone
1.用谷歌Chrome浏览器： 在Windows的【开始】–>【运行】中输入以下命令，自动启动后就只可以模拟相应手机的浏览器去访问3G手机网页： 谷歌Android： chrome.exe –user-agent...2.Opera浏览器 第1种方法（本人没有测试过） 对于Opera来说，模拟移动设备有一个专门的模拟器，叫“Opera Mobile Emulator”，Windows版的下载地址在下面： show...在操作上这款模拟器也非常方便，和安卓模拟器一样是可以直接键盘输入的，翻页只能用鼠标拖动，运行比安卓模拟器流畅。...不过这里要说的是，Opera Mobile Emulator模拟的是Opera自己的手机浏览器在移动设备下的状态。...3.Firefox浏览器 第1种方法 Firefox我没有测试过，要装各种插件感觉比较麻烦（Firefox本来就自带各种插件，再去装其他插件感觉有些不爽），从装的三个插件可以看出来Firefox的模拟应该是做的比较好的
大家好，又见面了，我是你们的朋友全栈君。...‘fastclick’ 并绑定到body FastClick.attach(document.body); 1、兼容性 iOS 3及更高版本的移动Safari iOS 5及更高版本的Chrome...Android上的Chrome（ICS） Opera Mobile 11.5及以上版本 Android 2以来的Android浏览器 PlayBook OS 1及以上版本 2、不应用FastClick...的场景 桌面浏览器; 如果视口元标签中设置了width=device-width，Android上的Chrome 32+会禁用300ms延时; 视频元标签如果设置了user-scalable=no，Android上的Chrome（所有版本）都会禁用300ms延迟。
，菜单在鼠标左侧，菜单在鼠标上方，菜单在鼠标下方）； 左键单击画布其他地方，隐藏菜单； 实现思路： 创建画布； 创建 “菜单” 的DOM元素； 去官网查找 “右键相关事件”； 右键单击在元素上，根据鼠标离画布边缘的距离...，计算菜单要显示的位置； 左键单击在画布上，隐藏菜单； 实现 查文档 在上面的思路中，其实难点只有 “右键相关事件” 。...于是我去 画布的文档 里找了下，发现这两个属性： fireRightClick ：画布是否可以触发右键事件 stopContextMenu：禁止默认右键菜单 哈哈哈哈，发达了~ 经我仔细观察，发现 mouse...版本：${fabric.version}`) // 初始化画布 init() // 禁止在菜单上的默认右键事件 menu.oncontextmenu = function(e) {...opt.target === null ，就是点击在画布上（没有点击在图形元素上）。 如果你的项目需求是右键点击画布也展示不同菜单，你可以修改上面代码的判断。
初次使用chrome inspect需要访问外国网站 适用范围 调试4.4以上版本android设备上app内的webview及chrome中的网页。...的调试工具，可运行在windows和mac平台上 依赖少，只需一个Chrome就能使用Safari和Chrome的调试工具 统一管理，在同个界面显示了iOS设备和Android设备及其调试页 一些实用小功能...，如截屏、设备控制、app安装等 适用范围 iOS设备和4.4以上版本Android设备（及其模拟器）上的webview和网页。...（如果app端还未完成开发） 支持在控制台直接require各种包方便调试、ipad端支持 ipad端还支持在设备中显示类似chrome的开发者工具 与第4点类似提供设备中的开发者工具显示，还有...常用的代理工具主要有fiddle和charles，代理工具上提供的功能很多，但调试过程中的打开方式一般有以下两种： 直接设置设备的代理服务器为本机，截获请求查询数据，排查异常信息，属于问题定位阶段
: sunjianfeng@csxiaoyao.com QQ: 1724338257 对于前端开发来说，在pc端使用chrome等浏览器的开发者工具简直是好用到爆，Chrome手机模拟器可以帮助开发调试移动端...2.1 Android + chrome 手机端安装Chrome浏览器，使用USB连接到PC，同时打开手机的USB调试模式。...iPhone和Mac自带Safari浏览器，但同样要使用USB连接到PC，然后分别对Mac和iPhone进行如下设置： Mac浏览器设置：Safari -> 偏好设置 -> 高级 -> 勾选"在菜单栏中显示开发...，就出现调试界面了，在iPhone上也能断点调试js了。...3. spy-debugger调试 然而，很多场景下Chrome/Safari的真机调试有局限性，例如：在微信或其他App/浏览器中打开的页面，由于不能直接在 chrome/safari 中打开，因此不能直接使用浏览器真机调试工具
如何开启Developer Menu 在模拟器上开启Developer Menu Android模拟器： 可以通过Command⌘ + M 快捷键来快速打开Developer Menu。...也可以通过模拟器上的菜单键来打开。 心得：高版本的模拟器通常没有菜单键的，不过Nexus S上是有菜单键的，如果想使用菜单键，可以创建一个Nexus S的模拟器。...Chrome 开发工具一共提供了8大组工具： Element 面板： 用于查看和编辑当前页面中的 HTML 和 CSS 元素。...在Android上 方式一： 在Android5.0以上设备上，将手机通过usb连接到你的电脑，然后通过adb命令行工具运行如下命令来设置端口转发。 ...源码显示在单独的标签页，通过点击 打开文件导航面板，导航栏中会显示所有已打开的脚本文件。 心得：Chrome开发着工具中的Sources面板几乎是我最常用的功能面板。
@csxiaoyao.com QQ: 1724338257 对于前端开发来说，在pc端使用chrome等浏览器的开发者工具简直是好用到爆，Chrome手机模拟器可以帮助开发调试移动端web页面，...2.1 Android + chrome 手机端安装Chrome浏览器，使用USB连接到PC，同时打开手机的USB调试模式。...iPhone和Mac自带Safari浏览器，但同样要使用USB连接到PC，然后分别对Mac和iPhone进行如下设置： Mac浏览器设置：Safari -> 偏好设置 -> 高级 -> 勾选"在菜单栏中显示开发...，就出现调试界面了，在iPhone上也能断点调试js了。...3. spy-debugger调试 然而，很多场景下Chrome/Safari的真机调试有局限性，例如：在微信或其他App/浏览器中打开的页面，由于不能直接在 chrome/safari 中打开，因此不能直接使用浏览器真机调试工具
如何开启Developer Menu 在模拟器上开启Developer Menu Android模拟器： 可以通过Command⌘ + M 快捷键来快速打开Developer Menu。...也可以通过模拟器上的菜单键来打开。 心得：高版本的模拟器通常没有菜单键的，不过Nexus S上是有菜单键的，如果想使用菜单键，可以创建一个Nexus S的模拟器。...Chrome 开发工具一共提供了8大组工具： Element 面板： 用于查看和编辑当前页面中的 HTML 和 CSS 元素。...在Android上 方式一： 在Android5.0以上设备上，将手机通过usb连接到你的电脑，然后通过adb命令行工具运行如下命令来设置端口转发。...源码显示在单独的标签页，通过点击 打开文件导航面板，导航栏中会显示所有已打开的脚本文件。 心得：Chrome开发着工具中的Sources面板几乎是我最常用的功能面板。
-- 应用模式，默认将全屏，禁止长按菜单，禁止手势，标准排版，强制图片显示。 --> Google Android <!...这样设定，访问者将无法脱机浏览 网页过期：指定网页在缓存中的过期时间，一旦网页过期，必须到服务器上重新调阅
问题思考 在混合开发的App中，经常会有内嵌的H5页面。那么这些H5页面元素该如何进行定位操作呢？...解决思路 针对这种场景直接使用前面所讲的方法来进行定位是行不通的，因为前面的都是基于Andriod原生控件进行元素定位，而Web网页是单独的B/S架构，两者的运行环境不同因此需要进行上下文（context...context 简介 Context的中文翻译为：语境; 上下文; 背景; 环境，在开发中我们经常说“上下文”，那么这个“上下文”到底是指什么意思呢？...系统版本5.0上基于chromium 37，Webview提供绝大多数的HTML5特性支持。...Webkit JavaScript起采用WebCore Javascript 在Android 4.4上换成了V8能直接提升JavaScript性能。
比如说我写了一个循环，该循环会执行10次，可是我发现程序在第8次执行时的结果并不是我想要的。...删除或禁用JavaScript断点 删除断点的方式，选择菜单栏中的Remove breakpoint。...禁用断点的方式，选择菜单栏中的Disable breakpoint 或者直接在设置了断点的行号上单击即可。 或者我们也可以通过debugger模块来统一管理所有的断点。...点击断点对应的复选框可以禁用断点，右键选择Remove breakpoint也可删除断点。 以及一些对断点的其他操作也可以通过右键菜单来实现，禁用激活所有的断点之类的。 ?...在DOM元素上设置断点 断点不仅仅可以设置在JS代码上，还可以在DOM元素上设置断点 刚刚看到时我都惊呆了，没想到竟然还有这种操作。 ?
"permissions": [ "contextMenus" ], 我在 background.js 里添加了两个菜单。...默认为“page”。 onclick ( optional function ) 当菜单项被点击时触发的函数。...【参数】 info ( OnClickData ) 右键菜单项被点击时相关的上下文信息。 tab ( Tab ) 右键菜单项被点击时，当前标签的详细信息。...enabled ( optional boolean ) 启用或者禁用此菜单项，启用为true，禁用为false。默认为true。...callback ( optional function ) 在创建完菜单项后触发。如果创建过程中有错误产生，其详细信息在Chrome.extension.lastError中。
Developer Menu Android模拟器： 可以通过Command⌘ + M 快捷键来快速打开Developer Menu。也可以通过模拟器上的菜单键来打开。...Chrome 开发工具一共提供了8大组工具： Element 面板： 用于查看和编辑当前页面中的 HTML 和 CSS 元素。...第二步：打开Chrome开发者工具 在该“http://localhost:8081/debugger-ui.”Tab页下打开开发者工具。打开Chrome菜单->选择更多工具->选择开发者工具。...Android 在Android5.0以上设备上，将手机通过usb连接到你的电脑，然后通过adb命令行工具运行如下命令来设置端口转发。...你可以通过断点前的复选框来启用和禁用断点，也可以单击右键来进行更多的操作(如：移除断点，移除所有断点，启用禁用断点等)。 ?
在本文中，我收集了一些开发技巧，以帮助您解决JavaScript动画的性能问题，并使您更容易实现在web上实现流畅移动的60fps(每秒帧数)目标。...在CSS触发器上，您将找到CSS属性的最新列表，其中包含了它们在每个现代浏览器中触发的工作的信息，包括第一次更改和随后的更改。 ?...2、提升你想要的元素到他们自己的层（谨慎） 如果您想要动画的元素在它自己的compositor层上，一些现代浏览器通过将工作卸载到GPU来利用硬件加速。...您可以通过右键单击web页面并在上下文菜单中选择Inspect来访问Chrome DevTools。 例如，使用性能工具记录web页面将使您了解该页面上的性能瓶颈： ?...如果您的框架涉及复杂的绘图操作，那么一个好主意是创建一个屏幕外的画布，您在其中执行所有的绘图操作一次或仅当发生更改时，然后在每个框架上绘制屏幕外的画布。
后来，我才醒悟到在前端领域，这是基本的调试功能，在 Chrome、Safari 这些现代的浏览器上都能这样做。 与一般的单机应用相比，让 Web 应用不能如期运行有更多的原因。...我们还会发现工具栏中的 Elements 菜单自动被选上了，这是因为我们要选择的元素是属于 Elements 下的。也因此，还可以在 Elements 中选择 HTML代码，查看它在页面上的位置。...(KHTML, like Gecko) Chrome/56.0.2924.87Mobile Safari/537.36 那么，我们就可以根据这些信息，最终确定设备是桌面设备，还是移动设备，是 Android...这时，难免的我们就需要处理 Android 设备上的这种 Bug。...我在我的 GitHub 上维护了，我常用的一些工具：https://github.com/phodal/toolbox，我整理了平时使用的插件在上面。
Chrome 试验性功能 2017年4月，Chrome通过使用原生Android API发布Android O，可以自动在移动设备上播放画中画视频。...2018年10月，Chrome在PC 客户端69版本加入画中画的特性，但在该版本中画中画是默认关闭的，如果想开启该特性，需要在浏览器执行以下操作： 输入chrome://flags并按下回车键 在搜索框依次搜索三个关键词...重启chrome浏览器 在含有视频的页面使用鼠标右击视频区域，点击菜单栏中的「画中画」选项观看视频 正式开启 到了70版本已默认开启该特性，安装chrome扩展插件可进入画中画，进入画中画后，页面选项卡会出现一个蓝色的图标...点击切换，让其置为true 重启浏览器 打开含有视频页面，开始播放视频 在视频区域鼠标右键，会出现画中画菜单 开启画中画 需要注意的是，Chrome 与 Firefox 的画中画模式略有不同，Chrome...），我将对目前已支持的浏览器（chrome和safari）分别介绍其Web API： 在chrome上运行 先来看一个示例（示例中的视频源来自腾讯）： ?
例如， true enablePerformanceLogging （仅限Web和webview）启用Chromedriver（在Android上）或Safari（在iOS上）性能记录（默认false）...在Android上，这个功能目前被忽略，尽管它仍然是必需的。...默认为false true 要么 false disableAndroidWatchers 禁用观察应用程序没有响应和应用程序崩溃的android观察者，这将减少Android设备/模拟器上的CPU使用率...3.3 ios独有Capability 在我选择appium时，最主要是因为他能够同时支持ios和android，在基础参数配置中ios也有他自己的独一份，不和android一样，下面我们大概介绍一下...在代码的第11行大家注意一个问题没有，在一个字符串中间我使用了一个%s，这个在python里面代表的意思是取一个变量，这个变量是我后面跟着的 port 这个变量的值，这里唯一的有问题就是这里。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
云直播
实时音视频
