笔者前段时间在做react-native开发，一直是有线连接安卓真机进行调试的。有线调试确实带来诸多麻烦，因为在调试过程中需要频繁和手机进行交互，导致有时候数据线脱落，就不得不重新安装debug apk，安装一次应用的时间大概在一到三分钟，大量的误触就使得花在安装应用花费的时间比较长。这几天在研究flutter，就上网搜了一下vscode 开发 flutter开启无线调试。然后顺藤摸瓜，把react-native的无线调试也试了一下。
友情提示：推荐阅读时间15分钟 + 练习时间15分钟 HTML5学堂：上一期给大家分享了Gulp的安装与使用，让大家对Gulp有着初步的认识。咱们学习使用Gulp的目的是提升开发效率，把开发过程中重复性的工作交给Gulp，让Gulp按照你的配置去完成操作。 Gulp本身给开发者提供了5个API接口，可以根据这些接口来开发Gulp插件。但是，Gulp目前拥有丰富的插件资源，开发人员可以根据项目的需求和个人偏好来配置使用这些插件，比如可以配置当修改了HTML文件浏览器自动刷新，也可以配置修改了CSS文件浏览器自
我们很早就开始了 Flutter 系列知识点的讲解了，第一篇内容见 Flutter 系列 - 环境搭建。因为非抵抗因素，我们停更了好久，今天我们又开始记录起来了。
最近在搭建一个静态页面偏多的网站, 用vue或React有点大材小用,使用纯html / css / js 又不好用, 于是就用npm手动搭建一个简单的本地开发环境, 本地环境要实现几个基本功能
原文链接：https://segmentfault.com/a/1190000018863373
介绍 webpack 是一个 JavaScript 应用程序模块打包器(module bundler)。webpack 通过快速建立应用程序依赖图表并以正确的顺序打包它们来简化你的工作流。你能够针对你的代码来对 webpack 进行自定义的优化配置，比如为生产环境拆分 vendor/css/js 代码，无刷新热重载(hot-reload)等. Webpack可以做什么 处理module依赖关系 打包js，css和png等 降低页面初始加载时间 方便组合第三方组件库 可以转换不同语法成标准语法 安装 这里使用
面对着产品同学不断的询问：为什么 h5 的体验这么差？为什么不能和 app 的播放体验保持一致？我们对着 h5 不明确的文档和不同浏览器的怪异表现欲哭无泪。
本文来自“小时光茶社（Tech Teahouse）”公众号 作者简介： 文赫，2015年加入腾讯，作为前端开发工程师参与过手Q游戏公会，游戏中心，企鹅电竞等项目，具有丰富的移动端开发和直播开发经验。 导语 企鹅电竞项目，直播和视频播放是其中的核心。面对着产品同学不断的询问：为什么h5的体验这么差？为什么不能和app的播放体验保持一致？我们对着h5不明确的文档和不同浏览器的怪异表现欲哭无泪。 经过一系列的调研爬坑，斩荆披棘，我们一步步提升了体验，做到了和app基本一致的体验。在摸索优化背后，我们也想把这些问题
平时在页面开发过程中，常会感觉有几个地方不太便利，例如： （1）浏览器中打开的标签页太多，调试的页面是其中的一个，感觉被淹没了，比如查看完其他网页资料，然后编辑代码，再找调试页面时就比较麻烦，得从众多标签页中寻找 （2）开发中有时需要清除浏览器缓存，但这可能影响已经打开的其他网站 （3）每次修改完代码后，需求手动刷新页面查看效果 后来我就使用单独的浏览器打开调试页面，这样可以使用 ctrl+tab 快捷键快速打开，并且清除缓存也不影响其他网页，然后使用 browsersync 来自动刷新 正好前阶段发现一个
通过前面的学习，对webpack有了更深的认识，故此节我们就利用前面相关知识自己动手用webpack构建一个React的开发环境，就算是一个小案例吧。
作者简介： 文赫，2015年加入腾讯，作为前端开发工程师参与过手Q游戏公会，游戏中心，企鹅电竞等项目，具有丰富的移动端开发和直播开发经验。 导语 企鹅电竞项目，直播和视频播放是其中的核心。面对着产品同学不断的询问：为什么h5的体验这么差？为什么不能和app的播放体验保持一致？我们对着h5不明确的文档和不同浏览器的怪异表现欲哭无泪。 经过一系列的调研爬坑，斩荆披棘，我们一步步提升了体验，做到了和app基本一致的体验。在摸索优化背后，我们也想把这些问题和解决方法总结下来，让其他同学做到直播的时候可以自豪的说，这
HTML 规范规定，在 标签中，每当 src 路径发生变化时，浏览器就会自动重新请求资源。所以我们可以编写一个简单的 js 脚本，只要验证码图片被点击，src 路径就会被加上当前【时间戳】，从而达到改变 src 路径的目的。
学习 React Native for Android 的开发环境搭建。 Facebook 于 2015 年 9 月 15 日发布了 React Native for Android 。React Native 让开发者使用 JavaScript 和 React 编写应用，利用相同的核心代码就可以创建 Web，iOS 和 Android 平台的原生应用。注意这里的 核心 两个词，它指的是那些底层的、与界面无关的逻辑。与 ionic / PhoneGap 这类 Web App 开发框架不同，React Na
大概在今年的十月份左右，我了解到Dcloud推出了uni-app。当时下载了一个Hbuilder X，下载了官方提供的hello示例教程。经过一番努力，在云端打包成功了。当时这个软件还不够完善，用iphone真机模拟运行时，还会存在中文乱码问题。我还特意提交了一个bug。
今天，我们来搞一个新东西，名字叫基于Vue技术栈的全栈热重载生产环境脚手架。实话说，这个名字我想了很久。最终，还是以这个名字作为文章标题。我先拆分解释下：全栈的意思是支持前后端；热重载这个名词相信大家很熟悉，就是页面每次改动，不需要手动去刷新，可自动刷新；生产环境这里你可以理解成线上环境，用户使用的环境。
当我们在修改主题样式后，经常要做的一个重复动作就是按F5刷新网页，今天介绍一款神奇的小工具，可以检测CSS和JavaScript文件的变化，并自动刷新网页的JS脚本Live.js。
本文介绍了如何利用Browsersync这个工具提高前端开发效率，通过具体的使用场景和命令行参数进行了详细说明。
这里的控制台特指PC端浏览器进入开发者模式之后新打开的操作界面。常见的控制台有Chrome的控制台，Firefox的firebug。这些都能帮助我们调试前端问题。本手册将以Chrome浏览器控制台为例进行讲解。
我在前几天刚写过的《让 F5 歇一会儿——laravel-mix 自动刷新之道》[1]中介绍了 laravel-mix 实现自动刷新的几种方法，其中就有涉及 hmr（Hot Module Replacement），但里面都是以 Laradock 环境为例。对于 Laravel 官方首推的 Homestead 当然也是可以的，只不过用法上有些差别，于加上 laravel-mix 本身的一些 BUG（在 issue 里搜索 hmr 结果就有好几页 :smile:），对于刚接触的人来说可能无从下手。
window.location.reload()，window.history.go(0)和document.execCommand(”Refresh”)，这三个方法是最快速的。其他的都有明显的浏览器滚动条的出现。 Javascript刷新页面的几种方法： 1 history.go(0) 除非有<%..%>等需在服务端解释才能生成的页面代码,否则直接读取缓存中的数据 不刷新 2 location.reload() 要重新连服务器以读得新的页面(虽然页面是一样的) 刷新 3 location=location 要在javascript中导航，不是调用window对象的某个方法，而是设置它的location.href属性，location属性是每个浏览器都支持的。比如： top 执行后有后退、前进 4 location.assign(location) 加载 URL 指定的新的 HTML 文档。 就相当于一个链接，跳转到指定的url，当前页面会转为新页面内容，可以点击后退返回上一个页面。 5 document.execCommand(‘Refresh’) 6 window.navigate(location) MSDN说的window.navigate(sURL)方法是针对IE的，不适用于FF，在HTML DOM Window Object中，根本没有列出window.navigate方法。 7 location.replace(location) 执行后无后退、前进 通过加载 URL 指定的文档来替换当前文档 ，这个方法是替换当前窗口页面，前后两个页面共用一个 窗口，所以是没有后退返回上一页的 8 document.URL=location.href
在 iOS Safari （其他浏览器和 Android 均不会）上会对那些看起来像是电话号码的数字处理为电话链接，比如：
功能：禁止所有搜索引擎索引本页面，禁止跟踪本页面上的链接。（如有特殊页面不希望被搜索到结果页，可使用）
webpack的原生支持上述2、3点内容，再结合官方提供的开放工具DevServer也可以很方便的做到第一点。DevServer会启动一个HTTP服务器用于服务网页请求，同时会帮助启动webpack，并接收webpack发出的文件变更信号，通过websocket协议自动刷新网页做到实时预览。
为你的夏日带去清凉，点击底部按钮有空调的声音https://ac.yunyoujun.cn/ ，文末点击阅读原文体验。
在现在的前端开发中，前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始逐渐渗透到“大前端”的开发中。前端开发过程越来越繁琐，当今越来越多的网站已经从网页模式进化到了 Webapp 模式。它们运行在现代的高级浏览器里，使用 HTML5、 CSS3、 ES6 等更新的技术来开发丰富的功能，网页已经不仅仅是完成浏览的基本需求，并且Webapp通常是一个单页面应用(SPA)，每一个视图通过异步的方式加载，这导致页面初始化和使用过程中会加载越来越多的 JavaScript 代码，这给前端开发的流程和资源组织带来了巨大的挑战。
第1步：浏览器使用<img src="/test/controller”>标签请求特定 Controller 路径。
需求：在微信h5页面中下载第三方app —— 安卓， 直接下载apk文件包；iphone，跳转AppStore
多端开发，听名字就感觉不一样，一套代码。多端使用，适用于各个平台。市面上很多关于多端开发的框架，比较常用，流行的框架 uni-app，Chameleon(变色龙),taro这些，都可以支持多端，一套代码，8个平台支持，
本文主要用到的工具软件有《网页自动操作通用工具》或《网页自动刷新监控工具》，其中《网页自动操作通用工具》包含《网页自动刷新监控工具》所有功能，所以主要以前者为例说明。请自行在网上搜索和下载软件。
通常来说，Web页面开发的流程大致是这样的：设计师（设计师不是美工，就像程序员不是码农一样）提供设计稿，通常是图片格式。然后前端的开发人员 （在ThoughtWorks我们称之为UI Dev）来手工的将图片转换为对应的HTML+CSS，往往还需要在各个浏览器中调试等。 大多数时候，设计师会提供色卡，或者至少前景色/背景色/高亮色的值给开发人员。如果没有的话，开发人员会用到一些工具如colorpicker, ruler之类来确保最终的效果和设计稿是一致的。 如果你观察过UI Dev的工作流程的话，你会发现基本
webpack-dev-server 是 webpack 集成的开发者服务器，用于帮助开发者快速开发应用程序。
当点击输入的时候，光标的高度和父盒子的高度一样。例如下图，左图是正常所期待的输入框光标，右边是ios的input光标。
Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。 无论您是前端还是后端工程师，使用它将提高您30%的工作效率。 MD5加密： import crypto from "crypto"; function md5(data) { let Buffer = require("buffer").Buffer; let buf = new Buff
该方法强迫浏览器刷新当前页面。 语法：location.reload([bForceGet]) 参数： bForceGet， 可选参数， 默认为 false，从客户端缓存里取当前页。true, 则以 GET 方式，从服务端取最新的页面, 相当于客户端点击 F5(“刷新”)
[前言]:因为最近在搞****API的时候用到了webpack的externals，才发现我之前都只是用webpack做一些搭建完项目后的“收尾工作”——即打包，而没有把它纳入到项目开发的“主体过程”
本文主要介绍了如何打造前端 Deepin Linux 工作环境并配置静态服务器。首先介绍了如何安装 xampp，然后讲解了如何利用 python 和 nodejs 安装静态服务器。最后，介绍了如何安装 Browsersync，并使用它来自动刷新浏览器，提高开发效率。
本文会讲 JS 引擎的编译流水线、渲染引擎的渲染流程，然后引入为什么需要 event loop。
最近开始接触weex。目前weex尚不成熟，官方文档有些粗糙，初学者难免碰壁。这里分享两条我的初学经验，供参考。
先说下故事背景，我们平时在部署Vue等前端项目的时候，因为客户端浏览器缓存原则，经常会出现修改后，而用户不能第一时间更新的情况，只能通过禁用缓存，或者配置nginx，或者干脆联系用户，让用户刷新页面等方案，我都尝试过，都不是很舒服，今天又学到了一个技巧，分享给大家，个人感觉还是可以的，是一个思路，可以往这个方向思考。
webpack打包原理 1、把一切都视为模块：不管是 CSS、JS、Image 还是 HTML 都可以互相引用，通过定义 entry.js，对所有依赖的文件进行跟踪，将各个模块通过 loader 和 plugins 处理，然后打包在一起。 2、按需加载：打包过程中 Webpack 通过 Code Splitting 功能将文件分为多个 chunks，还可以将重复的部分单独提取出来作为 commonChunk，从而实现按需加载。把所有依赖打包成一个 bundle.js 文件，通过代码分割成单元片段并按需加载 3、webpack.config.js的配置
最近给公司微信公众号，写了微信h5业务页面，总结分享一下前端开发过程中的几个兼容性坑，项目直接拿的公司页面，所以下文涉及图片都模糊处理了。
为了快速地进行构建使用 React 的项目，FaceBook 官方发布了一个无需配置的、用于快速构建开发环境的脚手架工具 create-react-app。 create-react-app所创建的应用入口文件是src/index.js文件。 1、使用的原因以及特性： 无需配置； 集成了对 React, JSX, ES6 和 Flow 的支持； 集成了开发服务器； 配置好了浏览器热加载的功能； 在 JavaScript 中可以直接 import CSS 和图片； 自动处理 CSS 的兼容问题，无需添加 -w
Cloud Studio 是基于浏览器的集成式开发环境（IDE），为开发者提供了一个永不间断的云端工作站。用户在使用 Cloud Studio 时无需安装，随时随地打开浏览器就能在线编程。
Spring Boot为开发者提供了一个名为spring-boot-devtools的额外工具模块来使得Spring Boot应用支持热部署，提高开发者的开发效率，无需手动重启Spring Boot应用，以此提升了Spring Boot应用的开发体验。
button点击事件有一个type属性，默认type是submit，有时候使用默认会出现页面自动刷新问题。
我查了很多资料，逛了很多论坛，最终在Github上找到了一个名为“NativeShure”的JS插件，据说对浏览器的兼容性不错，于是便开始折腾！
调试基于WebView的Hybrid App最舒服的工具当然是Chrome自带的开发者工具，其中有我们熟悉的Dom树调试，JS调试，Network监视等等功能。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/128190.html原文链接：https://javaforall.cn
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
