使用chrome调试前端线上代码

家都知道在前端开发过程中,为加快网站静态资源加载速度都会对js/css等静态资源进行压缩合并再部署到生产环境,而在实际开发过程中开发人员一般都是在开发环境进行源码文件开发调试的,当部署平台或部署人员将开发人员提交的前端代码进行压缩合并为压缩文件后,当遇到生产环境出现问题之后很难通过压缩文件去定位问题,所以如何让开发人员便利的调试线上代码,并迅速定位问题是部署及运维网站需要考虑的重要考量的地方,此文档教程将描述如何使用chrome浏览器进行线上调试源码问题. Step-by-step guide…

××校招：前端线上笔试题--页面中的一个元素（10px*10px）围绕坐标(200, 300) 做圆周运动

题目: 请让页面中的一个元素(10px*10px)围绕坐标(200, 300) 做圆周运动: 原理: 1.页面上画一个圆,画一个圆心.在这个圆的圆周上面画一个点,我们就让这个点绕着圆周跑: 2.怎么让这个点跑起来呢? 我们用javascrip的setInterval(function(),time);这个方法: The setInterval() method calls a function or evaluates an expression at specified…

怎么解决前端线上Bug

有一种八阿哥(Bug),叫"在我电脑上是好的呀". 有一种解决方式,叫"你去好好排查一下你自己的代码". 有一种控诉,叫"这绝不是后端的问题". 你能忍吗?我不能忍,为这事,我可没少跟同事撕逼,可是有什么用吗? 最后我想,这事儿也许不怪别人,怪就怪我无法直接证明这些bug不是我的.今天我们就来说说有哪些难搞的线上问题,该如何去定位,并解决它. 但是,解决线上的问题,不是看你会什么,而是看你有什么? ========================…

利用Chrome浏览器调试线上代码

前言之前调试前端bug都是在开发环境中做完并多次测试没有问题之后发布测试环境,验收合格之后发布生产.但生产环境偏偏会有和开发和测试环境不一致的情况,例如测试环境需要加密,而开发环境先不加密,测试环境传给我们的时间格式和生产环境时间格式不一致,数组对象不一致等导致线上生产报错的bug. 为了更好的在线上环境检测到具体的bug,节省我们在本地把地址改为生产的地址并走多一遍流程测试的麻烦,Chrome浏览器dbug测试就显得尤为重要了. 一.定位js代码并标记dbug 首先F12打开控制台,然后选择…

利用chrome调试JavaScript代码

看见网上很多人问怎么用chrome调试JavaScript代码,我也对这个问题抱着疑问,但是没有找到一篇能用的中文文章(可能我的google有问题),也不知道怎么点出一篇E文的,感觉作者写得不错,所以尽量按照原来的风格弄一篇中文的,希望对和我一样存在疑问的朋友有所帮助.如果高手路过,下面留言指点,或给与相关学习链接,谢谢. 下面我将通过一个例子让大家对chrome的调试功能有个大概的认识. 几个存在的bug: 我发现调试功能中有个小bug(作者发现的),尤其是在打开调试窗口时打开控制窗口,…

Javascript系列： Google Chrome调试js代码(zz)

你是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~,用这两种土办法确实解决了很多小型 JavaScript 脚本的调试问题.不过放着 Chrome 中功能越发强大的开发者工具不用实在太可惜了.本文主要介绍其中的 JavaScript 断点设置和调试功能,也就是其中的 Sources Panel(以前叫 Scripts).如果你精通 Eclip…

Google Chrome调试js代码

解放双手：如何在本地调试远程服务器上的Node代码

写在前面谈到node断点调试,目前主要有三种方式,通过node内置调试工具.通过IDE(如vscode).通过node-inspector,三者本质上差不多.本文着重点在于介绍如何在本地通过node-inspector 调试远程服务器上的node代码. 在进入主题之前,首先会对三种调试方式进行入门讲解,方便新手理解后面的内容.至于老司机们,可以直接跳到主题去. 方式一:内置debug功能进入调试模式(在第1行断点) node debug app.js 进入调试模式(在第n行断点) 比如要在…

如何利用Grunt生成对应的Source Map文件,线上代码压缩使用chrome浏览器便于调式

如何利用Grunt生成对应的Source Map文件,线上代码压缩使用chrome浏览器便于调式首先我们来说说为何要生成sourceMap文件呢?简单的说,sourceMap是为了压缩后的代码调式提供方便,比如线上的JS文件已经压缩了,但是线上比如说有bug,但是代码已经是压缩后的,对于开发并不好调式,所以想生存一个对应的Map文件,然后使用chrome浏览器在源文件未压缩的JS文件下调式. 那么Map文件到底是什么呢?简单的来讲它就是记录信息,记录一些为压缩之前的js文件的位置,及压缩后的文…

Google Chrome调试js代码,开发者工具之调试工具常用功能

参考:Google Chrome调试js代码-http://www.open-open.com/lib/view/open1384785324165.html 重点:左下角一个{}括号图标按钮用于把杂乱的代码重新格式化为漂亮的代码,比如一些已被压缩的 js 文件基本没法看.更没法调试.点一下格式化,再点一下就取消格式化. 查看元素上绑定了哪些事件默认会列出 All Nodes, 这些包括代理绑定在该节点的父/祖父节点上的事件, 因为在在冒泡或捕获阶段会经过该节点 Selected Node O…

通过 Chrome 调试运行在 IOS-safari 上的页面

本文重点讨论如何在 Windows 系统中通过chrome 浏览器调试运行在 iPhone Safari 浏览器中的网页.如果你有一台 iMac/MacBook,可忽略该文档.iMac 环境下,直接通过 USB 将 iphone 与 iMac/MacBook 链接,之后在 iMac/MacBook 中打开 Safari 进入调试模式,即可对运行在手机中的页面进行调试.详情见:Using Web Inspector to Debug Mobile Safari 或 Safari Web Inspe…

LINUX上使用GDB单步调试Chromium Android C++代码。

###动机###在LINUX使用GDB单步调试Chromium Android C++代码. [1]编译android平台Chromium, 修改GN文件中编译选项:-g -O0 使得编译优化更少,便于单步调试.gn gen --args='target_os="android" target_cpu="arm64" is_component_build=true symbol_level=2 remove_webcore_debug_symbols=true en…

Chrome调试中的奇技淫巧

网上有关Chrome调试的文章一搜一大堆,本文主要记录一下自己平时经常用并且又比较冷门的一些技巧. 打开Chrome调试工具 1.打开控制台的情况下,长按页面的“刷新”按钮可以选择按何种方式刷新(有正常重新加载.硬性重新加载.清空缓存硬性重新加载三种); Element 1.选中一个Dom元素之后,可以添加属性(enter).修改Dom节点(F2).删除Dom节点(delete).toggle 元素的 visibility 属性(h); 2.可以拖拽节点, 调整Dom顺序,也可以直接拖拽节点到编…

VS Code - Debugger for Chrome调试JavaScript的两种方式

VS Code - Debugger for Chrome调试JavaScript的两种方式最近由于出差的缘故,博客写的不是很多,一直想写一篇VS Code - Debugger for Chrome相关的文章,没想到一直拖到了今天.VS Code 开源以后确实在社区得到了很多人的支持,当中很多优点想必不用我多说,今天讨论的主题是Debugger for Chrome这个插件的使用.在网上简单找了一下,没有找到这个主题讲的特别好的文章,于是笔者写了这篇文章. 说实话,看了如下这篇文章,对于如何…

chrome调试

今天对chrome调试又进行了系统的学习. Chrome调试工具developer tool技巧把以前没有使用过的功能列举一遍. 伪类样式调试:伪类样式一般不显示出来,比如像调试元素hover的样式怎么办,看图勾选即可颜色表示转换:用颜色的名称;以十六进制数;以RGB整数设置颜色;以RGB百分数设置颜色.Shift+click即可切换另一格式. 命令断点调试使用“debugger;”语句在代码中加入强制断点. 需要断点条件吗?只需将它包装它在IF子句中: if (somethingHapp…

Chrome 调试技巧

Chrome 调试技巧 1.alert 这个不用多说了,不言自明. 可参考:https://www.cnblogs.com/Michelle20180227/p/9110028.html 2.console 基本输出想必大家都在用 console.log 在控制台输出点东西,其实console还有其它的方法: 1.console.log("打印字符串");//在控制台打印自定义字符串 2.console.error("我是个错误");//在控制台打印自定义错误信息…

Chrome调试ECMAScript之断点debug技巧大全!

这篇文章主要介绍了使用Chrome调试JavaScript的断点设置和调试技巧,需要的朋友可以参考下你是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~,用这两种土办法确实解决了很多小型 JavaScript 脚本的调试问题.不过放着 Chrome 中功能越发强大的开发者工具不用实在太可惜了.本文主要介绍其中的 JavaScript断点设置和调试功能,…

chrome 调试 SASS

第一步: 执行sass预编译命令先来我的项目文件夹结构: ->进入sass /css文件下->打开cmd命令 ->输入sass --watch --scss test.scss:test.css 如下图:-> 进入sass项目发现文件多了test.css.map和test.css两个文件夹,如下图: 这里生成的test.css.map是chrome调试的关键 -> 打开chrome F12开发者工具 ->输入项目地址,来配置一下chrome,使它支持map调…

理解WebKit和Chromium: 调试Android系统上的Chromium

转载请注明原文地址:http://blog.csdn.net/milado_nju 1. Android上的调试技术在Android系统上,开发人员能够使用两种不同的语言来开发应用程序,一种是Java语言,开发人员使用的是Android SDK来配置和编译这些代码,生成Java语言的class文件,也就是Java虚拟机执行的二进制代码.Android系统使用.dex文件将一系列的class文件压缩在一起.第二种是C/C++语言,使用Android NDK来配置和编译这些代码.这些代码经过NDK…

alert一般用来调试客户端的javascript代码,以及更好的调试方法

alert一般用来调试客户端的javascript代码调试利器--console.log 如今主流浏览器(Chrome,IE8及后续版本,FireFox,Opera等)都支持控制台功能. Chrome: IE9: FireFox(需安装FireBug插件) 当在js代码中调用Console.log方法时,相应的信息就会在控制台中显示.相对于alert方法,有三个优点: 如参数为一个对象,则可在控制台查看所有属性信息. 类似C#中的string.Format功能,不需字符串拼接. 无弹窗,即使不…

调试 - Chrome调试

调试 - Chrome调试打开开发人员工具 Ctrl+Shift+i可以打开开发人员工具. 功能面板 NetWork功能面板在当前页面打开调试工具,刷新页面后点击NetWork可以查看当前页面的Http信息,这个信息是从发起请求到获得响应后为止. 控制/录制资源列表点击资源名称(name),右侧会打开关于该资源详细信息的面板. Header 描述了请求头和响应头信息 Preview 预览资源的数据,比如image.js.css.html等 Response 响应的数据 Cookie 写入…

VSCode调试Html中的脚本 vscode前端常用插件推荐，搭建JQuery、Vue等开发环境 vsCode 添加浏览器调试和js调试的方法总结 VS Code - Debugger for Chrome调试js

一.背景使用Visual Studio Code写了一个简单的Html页面,想调试下其中script标签里的javascript代码,网上查了一通,基本都是复制粘贴或者大同小异的文章,就是要安装Debugger for Chrome插件,修改launch.json配置信息,F5启动,这些都照做了,但是仍有两个问题,一个是Html文件里不能打断点,只能在js文件里面打,二是chrome打开后说连接不到localhost,下面分别讲讲是怎么解决. 二.Html文件中不能打断点问题默认情况下,VS…

tomcat使用Eclipse进行远程调试（线上调试）

什么是远程调试,就是在A机器上利用Eclipse单步跟踪调试B机器上的Web应用,当然调试A机器上Web应用也是没有问题的,90%我都是调试本机的Web应用,远程调试的意义我想我不用说了,大家都会想到它的好处,你可以在本地调试非本地测试环境上的应用,这是件多么美妙的事,所以我就不说它的好处了,那么本地调试呢,我喜欢本地调试也采用下面要介绍的方法,为什么不用eclipse,WTP,TomcatPlugin等. 环境:tomcat,Eclipse,做远程调试不需要任何插件.当然可以使用Eclipse…