React Native(以下简称RN)为传统前端开发者打开了一扇新的大门。其中，使用浏览器的调试工具去Debug移动端的代码，无疑是最吸引开发人员的特性之一。 试想一下，当你在手机屏幕按下一个按钮，处理事件的代码就可以立即在浏览器的调试工具里进行断点调试，而且每当你对代码进行修改，界面便可以完成快速地重载，省去昂长的编译时间，这会是多么提高工作效率。 传统的Web前端开发人员自然很熟悉浏览器的调试工具，但是对于如何将其在...
最近沉迷吃鸡不能自拔，好久没更新文章了。后续将陆续完善《Koa2微信公众号开发》。一、简介关于微信公众号的介绍就省略了，自行搜索。注册过程也不说了。我们会直接注册测试号来实现代码。这将会是个全面讲解微信公众号开发的系列教程。本篇是该系列的第一篇，本地开发环境搭建以及接入微信。在开始之前最好去看看开发者文档微信公众平台技术文档二、本地开发调试环境搭建2.1 开发环境 MacOsNode v8.9.1Koa22.2 微信公众平台开发的...
前言 在开发的过程中，几乎不可能一次性就能写出毫无破绽的程序，断点调试代码是一个普遍的需求。 vscode 是一个非常棒的编辑器，内置功能强大的调试能力。经过简单的设定，就可以对 js 文件进行调试。但有时我们想要调试的内容是经过编译的，当然我们可以直接调试编译后的代码。但经过编译压缩以后的代码，可读性很差，且也可能无法分模块查看了，有什么方法进行编译前的代码调试么？答案当然是肯定的。 下面话不多说了，来一起看...
JavaScript 程序越来越复杂，调试工具的重要性日益凸显。客户端脚本有浏览器，Node 脚本怎么调试呢？2016年，Node 决定将 Chrome 浏览器的"开发者工具"作为官方的调试工具，使得 Node 脚本也可以使用图形界面调试，这大大方便了开发者。 本文介绍如何使用 Node 脚本的调试工具。 一、示例程序 为了方便讲解，下面是一个示例脚本。首先，新建一个工作目录，并进入该目录。 $ mkdir debug-demo $ cd debug-demo然后，生成 package.js...
在此之前，我一直都在研究JavaScript相关的反调试技巧。但是当我在网上搜索相关资料时，我发现网上并没有多少关于这方面的文章，而且就算有也是非常不完整的那种。所以在这篇文章中，我打算跟大家总结一下关于JavaScript反调试技巧方面的内容。值得一提的是，其中有些方法已经被网络犯罪分子广泛应用到恶意软件之中了。对于JavaScript来说，你只需要花一点时间进行调试和分析，你就能够了解到JavaScript代码段的功能逻辑。而我们所...
webpack项目调试 -sourcemap webpack配置提供了devtool这个选项，如果设置为 ‘#source-map，则可以生成.map文件，在chrome浏览器中调试的时候可以显示源代码。 devtool: #source-mapwebpack独立生成可修改的配置文件 用generate-asset-webpack-plugin这个插件，在webpack.prod.config.js中去生成configServer.json文件， 让其build的时候生成json文件，然后时候get方法异步获取json，替换url即可 具体做法： 先安装generate-asset...
在微信项目的开发的时候，经常需要对微信jssdk提供的接口进行调试，比如说录音, 分享 ,上传图像等接口，但是微信jssdk要求绑定安全域名才能使用其提供的一系列功能 , 而在开发环境中使用localhost或者本地ip无法完成域名的认证和绑定, 所以无法在本地调试 。当然有一种迫不得已方法 ，就是在本地开发完 ，打包发到公司的测试服务器上 ，利用测试服务器认证后的域名进行调试，每次改动，调试都要发一遍测试，显然这种方法非常麻烦且...
自从node6.3以来，node已经直接支持类似node-inpect的功能，只要对执行的js代码加入一个--inspect参数，即可使用chrome做代码调试。 本文使用如下工具： node v9.5.0chrome 64首先准备待调试代码。如果这是为了学习的目的，可以使用我测试用代码为： var objectRegExp = /^\[object (\S+)\]$/; function gettype(obj) {var type = typeof obj;if (type !== object) {return type;}// inspect [[Class]] for objectsreturn toString...
Console 对象提供对浏览器控制台的接入（如：Firefox 的 Web Console）。不同浏览器上它的工作方式是不一样的，但这里会介绍一些大都会提供的接口特性。Console对象可以在任何全局对象中访问，如 Window，WorkerGlobalScope 以及通过属性工作台提供的特殊定义。 它被浏览器定义为 Window.Console，也可被简单的 Console 调用。 最常用的方法就是Console.log(),就是在控制台输出内容。刚开始学前端的时候看到大家都是用的Console.lo...
写在前面 闲来无事，折腾了一下React Native，相比之前，开发体验好了不少。但在真机断点调试那里遇到了跨域资源加载出错的问题，一番探索总算解决，目测是RN新版本调试服务的bug。 遇到类似问题的同学应该不少，这里做下记录，有需要的可以参考下。 如何断点调试 首先，在真机上加载运行RN应用（过程略）。 然后，摇动手机，弹出开发菜单，选择“Debug JS Remotely”。chrome会自动打开调试界面，地址是 http://localhost:8081/de...
前两天拉取公司前端代码修改，发现在开发者工具的sources选项里边，居然没有列出来我要调试的js脚本，后来观察了一下，脚本是动态在页面里引入的，可能是因为这样所以不显示出来，但是如果不能断点调试，只靠打印日志真要把人累死了，效率太低，网络搜索试验了一下，有两种方式可以解决： 1、在脚本里边增加 //# sourceURL=xxxxxxxxx.js，名称自己命名，可以直接使用文件名，如下图：然后在网页里打开包含这个js的页面，这样就在开...
我们调试Javascript一般会用到Chrome或Firefox自带的调试工具，本文列出了几条用于调试Javascript的技巧，掌握它们，让我们花更少的时间来解决错误和bug，从而提高开发效率。1. debugger 除了console.log, debugger是我们最喜欢、快速的调试工具。执行代码后，Chrome会在执行时自动停止。你甚至可以把它封装成条件，只在需要时才运行。 if (thisThing) { debugger; }2. 用表格显示对象 有时， 有一组复杂的对象要查看。可以通过co...
我们给大家详细分析了一下在JS调试的时候经常用到的断点调试，并把经验和技巧做了总结，以下是全部内容： 1.断点调试是啥？难不难？ 断点调试其实并不是多么复杂的一件事，简单的理解无外呼就是打开浏览器，打开sources找到js文件，在行号上点一下罢了。操作起来似乎很简单，其实很多人纠结的是，是在哪里打断点？（我们先看一个断点截图，以chrome浏览器的断点为例）步骤记住没？ 用chrome浏览器打开页面 → 按f12打开开发者工具 ...
1.断点调试是啥？难不难？ 断点调试其实并不是多么复杂的一件事，简单的理解无外呼就是打开浏览器，打开sources找到js文件，在行号上点一下罢了。操作起来似乎很简单，其实很多人纠结的是，是在哪里打断点？（我们先看一个断点截图，以chrome浏览器的断点为例）步骤记住没？ 用chrome浏览器打开页面 → 按f12打开开发者工具 → 打开Sources → 打开你要调试的js代码文件 → 在行号上单击一下，OK!恭喜你的处女断点打上了,哈哈~~ 2....
什么是vue-devtools？ vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率。接下来我们就介绍一下vue-devtools的安装。 安装方式 1.chrome商店直接安装： vue-devtools可以从chrome商店直接下载安装，非常简单，这里就不过多介绍了。不过要注意的一点就是，需要翻墙才能下载。 2.手动安装： 第一步：找到vue-devtools的github项目，并将其clone到本地. vue-devtools git clone https://g...