当我第一次知道这种东西,我也惊呆了,居然还有这种操作,实在强大到没朋友,从此爱上调试,按时下班。
一些调试工具 说起手机端调试,相比大家都不陌生。 由于手机浏览器没有像PC端浏览器一样有开发调试工具,所以一般手机端的调试都要借助于电脑,现在的调试方式通常有以下几种。 直接在chrome, firefox等开启模拟器调试简单直接,还能模拟网络等,但是仍然无法100%还原手机的真实情况。 实现一套pc调试面板 采用这种实现方式有weinre,weinre很早前就比较流行了,使用也比较广泛,运行后会在PC上生成一个像chrome开发工具一样的调试器。能对手机进行远程调试,能操作DOM,打印console输出等
小技巧:不同类型的数据从 console 中打印出的颜色也不相同,可以借此判断数据类型
ctrl + shift + P 打开命令面板,搜索 screen 可进行各类截图,包括节点截图、区域截图和全屏截图
前言 自己开始开发的时候也在网上搜过些教程,尤以segmentfault和脚本之家的两篇文章为甚,然后两篇文章都只是讲了自己的场景和如何使用,却没有讲述其中的原理。我不喜欢只会用的程度,如果不明白为什
whistle 是一个基于 Node.js 的跨平台网络调试工具。最近随着 Nohost 的开源,有不少同学问了 whistle 相关的问题,本篇文章将结合几个常见的业务场景介绍如何在本地前端项目开发中使用 whistle 。 一、使用webpack devServer的项目 项目准备 如今,大部分的前端项目是以 webpack 作为开发和构建工具进行项目开发的。我们将以这样一个最常见的场景,即以 webpack 开启本地 devServer 进行开发和调试的方式,展示如何在这样的前端项目中结合使用 whi
whistle 是一个基于 Node.js 的跨平台网络调试工具。最近随着 Nohost 的开源,有不少同学问了 whistle 相关的问题,本篇文章将结合几个常见的业务场景介绍如何在本地前端项目开发中使用 whistle 。
在爬虫调试的时候一个良好的调试习惯,正确的调试技巧。绝对能让您在抓包,定位及JS解密与JS逆向等各种方面事半功倍。
Alfred是一款Mac系统必装软件,他提供快速启动App、全文查找文件、workflow自动化流程等功能。本文介绍如何使用Alfred Workflow+Apple Script实现快速启动开发环境。 问题 & 设想 先梳理下,我在日常启动前端的工作环境时,需要手动操作的步骤: 打开Webstorm并选择开发项目(10秒) 打开iterm命令行工具,并cd到项目下(5秒) 打开whistle代理(5秒) 打开chrome浏览器工作必须的插件,比如代理插件、react、vue调试插件(20秒) 打开c
whistle是一款用Node实现的跨平台的Web调试代理工具,支持查看修改http(s)、Websocket连接的请求和响应内容。IMWEB团队avenwu作品。github地址:https://github.com/avwo/whistle
Developer Menu是React Native给开发者定制的开发者菜单,来帮助开发者调试React Native应用。
很少有人能一下子就写出完全没有问题的代码。工作良好的程序,都是经过一遍遍的反复测试运行、发现问题、剔除问题(也就是我们所说的找Bug和修Bug)过后的产物,经过了这一过程,程序才能最终达到一个相对稳定的状态。
在我们前端开发的日常工作中,发现服务器上某个css/javascript文件有问题,需要修改,那真是家常便饭。通常,我们需要将文件进行修改,然后重新发布再验证,这样就很容易影响到生产环境的稳定性。更普遍的做法是,我们在开发环境中修改文件并验证,然后发布到生产环境。虽然安全,却比较繁琐。而利用Fiddler的可以修改HTTP数据的特性,我们就非常敏捷地基于生产环境修改并验证,确认后再发布。
Chrome 浏览器中,WebRTC 是默认开启的,如果没有开启,就需要检查是否有其他扩展在阻拦 WebRTC 服务,如 WebRTC Leak Prevent 和 WebRTC Control 和 Easy WebRTC Block 和 WebRTC Network Limiter 等。
最近偶然间有看到某家的一个站点中的网站中的前端代码的“泄露”。此处的泄露为什么打引号,因为一般来说网站的前端代码都是暴露出来的,都是可以访问的。但是一般生产环境的 JavsScript 代码都是经过压缩和混淆的,所以可读性大大降低,这也提升了从前端的角度挖取更多信息的门槛。这里的泄露指的是在 Chrome 浏览器的 Sources 面板中可以看到完整的以及原始的前端代码。
和 EpicGames 官方的像素流 SDK 相比,我们开发出了更轻量的像素流 SDK,包含 2 个文件:前端组件(WebComponents API)外加信令服务器(NodeJS)。
本文主要是讲解Uni-App开发技巧,如何快速的撸码?如何调试Uni-App?通过本文,让小伙伴们开发出优秀的Uni-App。
本文主要是从程序猿的角度进行分析的,致力于提供解决问题的思路,而不是盲目的从网上百度
如果大家对 Python 爬虫有所了解的话,想必你应该听说过 Selenium 这个库,这实际上是一个自动化测试工具,现在已经被广泛用于网络爬虫中来应对 JavaScript 渲染的页面的抓取。
了解需求: 1、性能测试过程中,我们经常需要对流程化的业务进行性能测试,其中涉及到很多接口,这时候问开发拿接口和参数就会降低工作效率,直接用jmeter的录制功能就能提高工作效率 2、开发接口案例中,我们也经常会碰到一些上传、下载、导入等等一些接口功能,这些脚本如果直接问开发拿接口和参数也不方便,直接录制效率也会更高 3、百度网盘共享了一份录制模版,常用的测试元件都已经添加,排除模式也添加了常见的不需要的请求,录制模板下载方式见文章末尾介绍 一、配置浏览器代理 1. 打开IE浏览器,然后点
根据CommonJS规范,一个单独的文件就是一个模块。每一个模块都是一个单独的作用域,也就是说,在一个文件定义的变量(还包括函数和类),都是私有的,对其他文件是不可见的。
浏览宽高变化监测主要是监测浏览器可视区域的宽高:window.innerWidth / window.innerHeight(滚动条和内容区)和浏览器宽高:window.outerWidth / window.outerHeight(inner的基础上加上工具条的宽高)之间的差值。
登录公众号后,左侧菜单栏选择:开发 => 基本配置,直接复制开发者ID(AppID)即可:
作者:LoRexxar'@知道创宇404实验室 时间:2021年4月16日 4月12号,@cursered[1]在starlabs上公开了一篇文章《You Talking To Me?》[2],里面分
一、前言 当使用CoffeeScript、ClojureScript编写前端脚本时,当使用Less、Sacc编写样式规则时,是否觉得调试时无法准确找到源码位置呢?当使用jquery.min.js等经压缩后的工具库时,是否觉得连调试的门都不不知道在哪呢? 针对上述问题,google为我们提供了Source Maps这一解决方案,以下内容为对Source Maps的学习记录,以便日后查阅。 由于篇幅较长,特设目录一坨! 二、示例 三、Sou
前言 我们大前端团队内部 ?每周一练 的知识复习计划继续加油,本篇文章是 《Hybrid APP 混合应用专题》 主题的第二期和第三期的合集。 这一期共整理了 10 个问题,和相应的参考答案,文字和图
前言 我们大前端团队内部 📖每周一练 的知识复习计划继续加油,本篇文章是 《Hybrid APP 混合应用专题》 主题的第二期和第三期的合集。 这一期共整理了 10 个问题,和相应的参考答案,文字和图片较多,建议大家可以收藏,根据文章目录来阅读。 之前分享的每周内容,我都整理到掘金收藏集 📔《EFT每周一练》 上啦,欢迎点赞收藏咯💕💕。 内容回顾: 《EFT 每周分享 —— Hybrid App 应用开发中 5 个必备知识点复习》 《EFT 每周分享 —— HTTP 的15个常
4月12号,@cursered在starlabs上公开了一篇文章《You Talking To Me?》,里面分享了关于Webdriver的一些机制以及安全问题,通过一串攻击链,成功实现了对Webdr
1、项目分为PC端、移动端、和PC管理端,分为对应目录为 /Application/Home,/Application/Mobile,/Application/Admin;
UIWebView 是苹果继承于 UIView 封装的一个加载 web 内容的类,它可以加载任何远端的web数据展示在你的页面上,你可以像浏览器一样前进后退刷新等操作。不过苹果在 iOS8 以后推出了 WKWebView 来加载 Web,并应用于 iOS 和 OSX 中,它取代了 UIWebView 和 WebView ,在两个平台上支持同一套 API。
借助webpack,在开发模式下我们可以使用热重载、路由重定向、代理服务器等功能,而source-map更是准确定位代码错误的利器。
众所周知,JavaScript 是单线程的语言。当我们面临需要大量计算的场景时(比如视频解码等),UI 线程就会被阻塞,甚至浏览器直接卡死。现在前端遇到大量计算的场景越来越多,为了有更好的体验,HTML5 中提出了 Web Worker 的概念。Web Worker 可以使脚本运行在新的线程中,它们独立于主线程,可以进行大量的计算活动,而不会影响主线程的 UI 渲染。当计算结束之后,它们可以把结果发送给主线程,从而形成了高效、良好的用户体验。Web Worker 是一个统称,具体可以细分为普通的 Worker、SharedWorker 和 ServiceWorker 等,接下来我们一一介绍其使用方法和适合的场景。
Chrome 是 Google 出品的一款非常优秀的浏览器,其内置了开发者工具(Windows 系统中按下 F12 即可开启),可以让我们方便地对 JavaScript 代码进行调试。
自2019.05.22日离职以来,自己在家浪了两天。然后发现,浪也该浪够了,该收心找下工作了。于是屁颠屁颠的拿起了《在你身边 为你设计》这本书看了一下午,看到移动端调试这里,略有感受,于是提取了下内容
本文介绍了 OpenROV 是一款开源的 DIY 水下机器人项目,用户可以通过它来探索水下世界。它由 OpenROV 团队开发,支持多种插件,具有高扩展性。目前,OpenROV 已经发展到了 OpenROV 2.0 版本,拥有更强大的功能和性能。
Inside look at modern web browser 是介绍浏览器实现原理的系列文章,共 4 篇,本次精读介绍第一篇。
最近这段时间主要在不同平台测试模块的稳定性,目前播放这一块没发现问题,由于条件限制,除了FreeBSD平台没测试过,Windows 7,Debian 7.x和macOS Sierra都测试过了,由于Nginx官方对Windows支持不太好,没用Windows平台最强大的IOCP接口(使用的select),所以导致Windows平台上运行效率不太高,表现在推流等待时间长,3s+,首屏时间很长,4s+,select本身原因限制客户端个数,默认是1024。推流等待时间和首屏时间最短的是macOS Sierra,本机上测试时基本上是秒推秒开。昨晚专门注意了一下,在macOS Sierra下编译时,SO_REUSEPORT和TCP_FASTOPEN两项都支持,前者让Nginx的每个子进程都可以listen,都有一个专门的accept队列,解决了惊群效应;后者则是在发起SYN时就已经携带实际数据,而不是握手完毕后再传输实际数据。秒推秒开可能跟这两个选项有关。但是macOS Sierra并不支持将某个进程绑定到某个CPU上,所以可能进程上下文切换会有开销,系统负载较大时可能效率不如Linux。由于macOS Sierra是公司的电脑,所以未做压力测试。我的笔记本装的是Debian 7.x,因为内核版本较低,所以macOS Sierra上支持的两个选项都不支持。测试时推流等待时间和首屏时间都介于Windows 7和macOS Sierra之间,在服务器上测试时(系统CentOS 6.4,支持SO_REUSEPORT但是不支持TCP_FASTOPEN)跟macOS Sierra上差不多,但是考虑到服务器的CPU性能强大得多,所以负载不高情况下,macOS Sierra的表现是最好的。由于macOS Sierra是从Mac OS X更新来的,而Mac OS X的底层最初是在FreeBSD基础上开发的,所以推测在FreeBSD上的表现应该也不错。
2. 在配置 webpack.config.js 中设置 watch: true;
本文章中所有内容仅供学习交流,抓包内容、敏感网址、数据接口均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关,若有侵权,请联系我立即删除!
说起sourceMap大家肯定都不陌生,随着前端工程化的演进,我们打包出来的代码都是混淆压缩过的,当源代码经过转换后,调试就成了一个问题。在浏览器中调试时,如何判断原始代码的位置?
前言 我们大前端团队内部 ?每周一练 的知识复习计划继续加油,本篇文章是 《Hybrid APP 混合应用专题》 主题的第二期和第三期的合集。 这一期共整理了 10 个问题,和相应的参考答案,文字和
最近在群里看到好多人说四川省自考报名网站炸了,然后升级了之后好像今天又重新开放了,看到了一个排队99999人的图,然后还有个别在群里叫嚣代自考报名,收费5-20元不等,并且还包代报成功,于是这里绝对有猫腻,所以进行了一个简单的研究,看了下网页代码和js代码,发现只是把登录界面做了隐藏,于是分享给大家。
在根目录新建 pnpm-workspace.yaml 文件; 意思是,将 packages 目录下所有的目录都作为单独的包进行管理。
webpack的原生支持上述2、3点内容,再结合官方提供的开放工具DevServer也可以很方便的做到第一点。DevServer会启动一个HTTP服务器用于服务网页请求,同时会帮助启动webpack,并接收webpack发出的文件变更信号,通过websocket协议自动刷新网页做到实时预览。
01 首先说说sourceMap 说起sourceMap大家肯定都不陌生,随着前端工程化的演进,我们打包出来的代码都是混淆压缩过的,当源代码经过转换后,调试就成了一个问题。在浏览器中调试时,如何判断原始代码的位置? 为了解决这个问题,google 提出了sourceMap 的想法,并在chorme上最先支持sourceMap的使用。sourceMap 由于包含许多信息,前期也经过多版的编码算法优化,最后在2011年探索出了Source Map Revision 3.0 ,这个版本也就是我们现在一直在使用的s
selenium的其它使用方法 知识点: 掌握 selenium控制标签页的切换 掌握 selenium控制iframe的切换 掌握 利用selenium获取cookie的方法 掌握 手动实现页面等待 掌握 selenium控制浏览器执行js代码的方法 掌握 selenium开启无界面模式 了解 selenium使用代理ip 了解 selenium替换user-agent ---- 1. selenium标签页的切换 当selenium控制浏览器打开多个标签页时,如何控制浏览器在不同的标签页中进行切换呢?
领取专属 10元无门槛券
手把手带您无忧上云