本文作者：IMWeb Jianglinyuan 原文出处：IMWeb社区 未经同意，禁止转载 背景 其实浏览器中的人脸识别 API 已经发布有一段时间了，从Chrome 70 版本以上就有了。...其中包括了人脸，文本或 QR 码的识别，基本上覆盖了当前互联网应用的大部分场景。...随着云服务的发展，现在很多跟图像识别相关的服务基本都集成在了云服务之中，前端的使用场景其实还是相对来说比较偏弱，但是对于各种爱折腾的前端er来说，玩玩还是可以的，不然怎么能满足内心那盛开的好奇心呢。...}) .catch(err => console.error(err)); 浏览器中的人脸识别 浏览器中使用人脸识别其实原理比较简单，使用一个图片作为入参，然后调用FaceDetector就可以进行简单的人脸识别了...，最后我们可以通过 canvas 对结果进行输出。
上篇文章中写了流行的前端UI几大框架，发现大部分评价都是Vue的UI组件库，从评论中得知漏掉了很多，也有人问React ui，自己就搜索总结下适应于ReactJS的UI组件库。...Ant-design是阿里巴巴团队出品的ReactUI组件库。有自己独特的设计风格和理念。在支付宝、蚂蚁金服等多个阿里项目中投入使用。组件化质量非常高，开箱即用。...它在用户体验的设计上与Bootstrap和Foundation相比,更胜一筹。集成了很多很漂亮的UI模块，能够使网页制作更加高效和美观。...它的组件使用TypeScript编写，并以Sass编写样式风格，以实现快速且灵活的开发流程。...Rebass 它包含60个组件，是一个UI库及UI设计系统。
你永远不知道谁会在看，大家可以在haiyong.site上查看我的 想要完成上面的效果，你只需使用下面解释的字符串替换方法，在其中添加 %c 变量，然后作为变量参数添加如下所示的样式。...信息图标不出现，因此 Chrome 中的 console.log 和 console.info 之间没有视觉差异。 // 4....ERROR console.error("console.error()"); // 6....输出： 5.记录 console.logs 的数量 如果你想知道一个组件被渲染了多少次或者一个函数被调用了多少次，可以使用 console.count() 方法。...将数组或对象输出为表格 使用console.group()方法组织数组对象的输出。
其中涉及的技术也在不断的演变，下面简要介绍几种思路： 基于特征的人脸检测，例如opencv中内置了基于Viola-Jones目标检测框架的Harr分类器，只需要载入一个配置文件（haarcascade_frontalface_alt.xml...3.1 Shape Detection API 随着客户端硬件的计算能力逐渐提高，浏览器层面得到的权限也越来越多，由于图像处理需要耗费大量的计算资源，实际上浏览器上也能承担图像检测的一些工作，因此就搞出了个...以下几个简单的例子介绍了基本的用法，在尝试编辑并运行这些代码之前，请确保在你的Chrome版本以及该新特性已经被激活，另外该API受同源策略所限制： chrome://flags/#enable-experimental-web-platform-features...(box.rawValue)); } }) .catch(err => console.error(err)); 3.2 图像中的人脸检测 图像的人脸检测比较简单，只需要传入一个图片的元素...设想一下在一个Electron或者Node-Webkit容器中，我们是否可以通过本地开启websocket服务来实现实时的人脸检测呢？
执行代码后，Chrome会在执行时自动停止。你甚至可以把它封装成条件，只在需要时才运行。 if (thisThing) { debugger; } 2....将代码格式化后再调试JavaScript 有时代码会在生产环境出问题，但是你的source maps没有部署在生产环境上。不要怕。Chrome可以将您的JavaScript文件格式化。...在复杂的调试过程中寻找重点 在更复杂的调试中，我们有时希望输出很多行。...可以做的就是保持良好输出结构，使用更多控制台函数，例如, console.log, console.debug, console.warn, console.info, console.error等等。...有时候它会改变，你并不知道为什么。 但是，当您调试JavaScript时，Chrome可以在DOM元素发生更改时暂停。你甚至可以监视它的属性。
执行代码后，Chrome会在执行时自动停止。你甚至可以把它封装成条件，只在需要时才运行。 if (thisThing) { debugger;} 2....将代码格式化后再调试JavaScript 有时代码会在生产环境出问题，但是你的source maps没有部署在生产环境上。不要怕。Chrome可以将您的JavaScript文件格式化。...在复杂的调试过程中寻找重点 在更复杂的调试中，我们有时希望输出很多行。...可以做的就是保持良好输出结构，使用更多控制台函数，例如： console.log, console.debug, console.warn, console.info, console.error等等。...有时候它会改变，你并不知道为什么。 但是，当您调试JavaScript时，Chrome可以在DOM元素发生更改时暂停。你甚至可以监视它的属性。
0.3); } 使用 Less Less 可以通过 npm 在命令行上运行；在浏览器上作为脚本文件下载；或者集成在广大的第三方工具内。...编译器了，如下： $ lessc styles.less 这将输出编译之后的 CSS 代码到 stdout，你可以将输出重定向到一个文件： $ lessc styles.less > styles.css...若要输出压缩过的 CSS，只需添加 -x 选项。...执行 lessc 且不带任何参数，就会在命令行上输出所有可用选项的列表。 代码中使用 可以像下面这样在代码中调用 Less 编译器（Node 平台）。...less.Parser); parser.parse('.class { width: (1 + 1) }', function (err, tree) { if (err) { return console.error
Vue SSR 的实现，主要就是把 Vue 的组件输出成一个完整 HTML, vue-server-renderer 就是干这事的。...第一个比较容易理解，为什么数组长度不能被 getter/setter ？ 在知乎上找了一个答案：如果你知道数组的长度，理论上是可以预先给所有的索引设置 getter/setter 的。...具体，可以参考 http://es6.ruanyifeng.com/#docs/reference Vue 组件 data 为什么必须是函数 理解两点： 每个组件都是 Vue 的实例。...if (ch)，只有新的节点有子节点，调用createEle(vnode)，vnode.el已经引用了老的dom节点，createEle函数会在老dom节点上添加子节点。...最最重要的一点，electron 实际上是一个套了 Chrome 的 node 程序。 所以应该是从两个方面说开来： Chrome （无各种兼容性问题）； Node （Node 能做的它也能做）。
WebView，是安卓中很重要的一个组件，我们的应用中集成WebView后，可能会遇到各种各样的问题，这里简单介绍一些Android WebView 诊断与排查问题的方法，希望对于大家有这方面的问题的朋友有所帮助...这其中的缘由是 我们在设备上安装的charles证书，属于用户添加的证书 出于应用安全的目的，Android 7及之后默认不信任用户添加的证书(Android 7 之前是默认信任用户添加的证书) 当我们将...所以，我们按照这篇文章解决Android手机连接Charles Unknown问题的方案，允许App在debug版本下信任用户证书就可以解决问题了。...("console.error") 我们使用 1 adb logcat | grep "chromium" --line-buffered --color=always | grep CONSOLE...，输入chrome://inspect ?
至于为什么不用，因为我需要在 content-scripts.js 中引入 element 组件，如果使用 babel-plugin-component 将无法按需导入组件以及样式（应该是只支持 vue...this.show }, }, }) } 因为只能在 js 中编写 vue 组件，所以得用 template 模板，同时使用了 directives，给组件添加了拖拽的功能（尤其是...后续我都会使用 JQuery 来进行操作 在 src/content-script/bilibili.js 中写下如下代码 window.onload = function () { console.log...如果你想的话也可以直接在 content-script.js 上编写代码，这样就无需使用 window 对象，但这样导致一些业务逻辑都堆在一个文件里，所以我习惯分成 bilibili.js 然后注入方式为...用过 Vue 的都知道写网页很方便，写 Chrome 插件未尝不是编写一个网页，当时的我在接触了 Vue 后就萌发了使用 vue 来编写 Chrome 的想法，当然肯定不止我一个这么想过，所以我在 github
在开发中，AJAX 发起的请求不管成功还是失败，浏览器基本都会给你一个答复。但 uni-app 提供的 api 来看，蓝牙接收数据会显得更加 “异步” 。...在使用 uni.startBluetoothDevicesDiscovery （开始搜索）后，可以使用 uni.onBluetoothDeviceFound 进行监听，这个方法里面接收一个回调函数。...10rpx; border-bottom: 1px solid #ccc; } button { margin-bottom: 20rpx; } 复制代码 连接成功后在控制台会输出...通常设备收到你发送过去的信息，会返回一条消息给你，而这个回调消息会在 uni.onBLECharacteristicValueChange 触发，也就是 第【9】步 那里。...在日常工作中，uni.readBLECharacteristicValue 的作用主要是读取数据，但使用场景不算很多。
在开发中，AJAX 发起的请求不管成功还是失败，浏览器基本都会给你一个答复。但 uni-app 提供的 api 来看，蓝牙接收数据会显得更加“异步”。...在使用 uni.startBluetoothDevicesDiscovery （开始搜索）后，可以使用 uni.onBluetoothDeviceFound 进行监听，这个方法里面接收一个回调函数。...padding: 10rpx; border-bottom: 1px solid #ccc; } button { margin-bottom: 20rpx; } 连接成功后在控制台会输出...通常设备收到你发送过去的信息，会返回一条消息给你，而这个回调消息会在 uni.onBLECharacteristicValueChange 触发，也就是 第【9】步 那里。...在日常工作中，uni.readBLECharacteristicValue 的作用主要是读取数据，但使用场景不算很多。
你修改了原生代码（iOS上的Objective-C/Swift或者Android中的Java/C++）. 应用内的错误与警告提示（红屏和黄屏） 错误和警告会在开发构建时显示在你的app中。...错误（Errors） app中的错误会在你的app中用红色背景的全屏显示。这个屏幕也叫RedBox。你可以使用 console.error() 来手动触发一个。...Chrome 开发者工具 在开发者菜单选择“Debug JS Remotely”来在Chrome中调试JS代码。...使用Chrome开发者工具在设备上调试 在iOS设备上，打开 RCTWebSocketExecutor.m 文件并将“localhost”改为你电脑的IP，然后在开发者菜单中选择“Debug JS Remotely...chrome标签中，打开：chrome://inspect，点击 'Inspect device' （“Powered by Stetho”后面的那个） 调试原生代码 当使用原生代码时（比如编写原生组件时
初始值应在和之间，使用value指定无效。 input和textarea都会在value属性保存自己的内容，可设置和读取文本框的值。...在textarea中设置value属性无效 选择文本 select方法 文本框有一个select方法，可以选中文本框中全部内容，在调用该方法时会自动将焦点设置到文本框。...select事件会在用户选择完文本后立即触发(IE老版本除外)。...) console.log(e.target.selectionEnd) }) 所以可以直接使用slice方法得到选中文本。
元素 在Elements选择面板中选择某个DOM元素然后在Console中使用该元素也是非常常见的一个操作，Chrome Inspector会缓存最后5个DOM元素在它的历史记录中，你可以用类似于Shell...这边介绍一个相对快捷点的方法，就是在console中使用debug(funcName)然后脚本会在指定到对应函数的地方自动停止。..., console.error这些来进行区分，然后就可以在Inspector中进行过滤。...监测指定函数的调用与参数 在Chrome中可以监测指定函数的调用情况以及参数： var func1 = function(x, y, z) { }; 这种方式能够让你实时监控到底啥参数被传入到了指定函数中...Console中使用$进行元素查询 在Console中也可以使用来进行类似于querySelector那样基于CSS选择器的查询，(‘css-selector’) 会返回满足匹配的第一个元素，而$$(‘
今天开始分享如何从0搭建UI组件库。这也是前端反卷计划中的一项。在接下来的日子，我会持续分享前端反卷计划中的每个知识点。以下是前端反卷计划的内容：目前这些内容持续更新到了我的 学习文档 中。...，需要在MenuItem组件中使用，所以这里使用context来传递propsinterface IMenuContext { index: string; onSelect?...上加上displayNameMenuItem.displayName = 'MenuItem'写一个renderChildren方法，使用React.Children来遍历传进来的children,根据...组件中通过context获取defaultOpenSubMenus。...-01-环境搭建前端反卷计划-组件库-02-storybook前端反卷计划-组件库-03-组件样式前端反卷计划-组件库-04-Button组件开发持续更新目前这些内容持续更新到了我的 学习文档 中。
在浏览器排行上，chrome最多人使用，而且占了浏览器份额的半壁江山。可见其欢迎程度。作为一个前端开发者，我也是注重chrome的使用技巧。...console这个界面，平常开发用得非常多，调试JS代码的时候，经常需要在console输出变量或者节点。个人使用上，除了在控制面板内写jS外，用得最多的就是上图，指向的那个按钮，点击一下就清空面板。...比如输出一个对象和节点 alert({1:1}); console.log({1:1}) alert(document.getElementById("attribute-box")); console.log...这个在调试上就比较方便！ 关于$的api，我知道的有几个，但是我使用过用的就下面两个。其它的没怎么了解，大家有需要可以自行上网查找资料！...（看了定不让你失望） 10.小结 好了，关于chrome的不完全指南就说到这里了，上面所提及的内容，可能也就chrome的20-40%功能，但是在日常开发上的使用，可能占了80%。
▪ 你修改了原生代码(iOS上的Objective-C/Swift或者Android中的Java/C++). 1.4 应用内的错误与警告提示(红屏和黄屏) 错误和警告会在开发构建时显示在你的...1.4.1 错误(Errors) app中的错误会在你的app中用红色背景的全屏显示。这个屏幕也叫RedBox。你可以使用console.error()来手动触发一个。...log-android 你也可以通过在iOS模拟器中访问Debug -> Open System Log… 或者在Androidapp在设备或者模拟器上运行时在终端中运行adb logcat...1.6 Chrome开发者工具 在开发者菜单选择“Debug JS Remotely”来在Chrome中调试JS代码。...1.6.1 使用Chrome开发者工具在设备上调试 在iOS设备上，打开RCTWebSocketExecutor.m文件并将“localhost”改为你电脑的IP，然后在开发者菜单中选择
console.group（）命令使用一个字符串参数来设置组的名称。 在您的JavaScript中调用它之后，控制台将开始将所有后续输出组合在一起。...此示例显示登录进程的身份验证阶段的日志组： 输出的结果如下： 自动折叠组 当大量使用群体时，在发生的事情看不到的时候可能非常有用。...console.error（） console.error（）方法显示红色图标和红色消息文本： 输出如下： console.warn（） console.warn（）方法显示带有消息文本的黄色警告图标：...以下示例使用字符串和数字格式化程序将值插入到输出字符串中。你会在控制台上看到“Sam has 100 points”。...您可以使用％o字符串说明符来执行此操作（请参阅上文），或者使用console.dir来实现相同的操作： 本文内容来自：chrome console控制台的使用： 诊断并记录 – Break易站
你一定听说过 console.log() ，而且可能一直在使用它。它非常流行，在集成开发环境中键入时，Visual Studio Intellicode 等工具通常会在其他控制台方法之前推荐使用它。...() 在 Chrome 浏览器控制台中: console.table() in Node.js Node.js 中的 顾名思义，它以易于理解的表格形式呈现数据，就像电子表格一样。...console.error('This is an error message.'); console.log('This is a log message.'); 不过，在 Node.js 中不会有这种颜色分离...5. warn() console.warn() 在 Chrome 浏览器控制台中输出黄色信息，表示警告。...console.warn('This is a warning message'); 在 Node.js 中，信息会像 console.error() 一样写入 stderr 流。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
