Chrome inspect学习(四)本地环境/测试环境前端与客户端交互,涉及客户端代码报错,如何调试

摘要:
效果结果这样我们就可以像在chrome控制台中一样去debug了~~~
前言

问题一:在开发内嵌H5页面时,涉及前端与客户端交互,那么涉及客户端的代码在本地是无法执行的,只有在真机上能执行,如果执行时发现问题,如何调试呢?

方案

方案一:使用vconsole,可以查看DOM结构、接口调用,但无法查看CSS样式,也可以在关键位置打日志,但是无法打断点debug调试,所以调试起来并没有特别方便

方案二:使用Chrome inspect,可以查看DOM结构、接口调用、CSS样式也可以打断点进行debug调试

tip:关于debug调试一般是页面没打包我们调试,打包了就是压缩代码了不好调试,所以一般都是本地环境在页面在手机中加载时去debug调试!!!

效果

Chrome inspect学习(四)本地环境/测试环境前端与客户端交互,涉及客户端代码报错,如何调试第1张

Chrome inspect学习(四)本地环境/测试环境前端与客户端交互,涉及客户端代码报错,如何调试第2张

Chrome inspect学习(四)本地环境/测试环境前端与客户端交互,涉及客户端代码报错,如何调试第3张

结果

这样我们就可以像在chrome控制台中一样去debug了~~~

免责声明:文章转载自《Chrome inspect学习(四)本地环境/测试环境前端与客户端交互,涉及客户端代码报错,如何调试》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Hive中文注释乱码解决方案(2).net iis excel导出问题下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

第一节:Webpack简介、安装-配置-打包、常用loader的使用(css/style/less/postcss-loader)

一. 简介 1. Webpack背景  (1). 事实上随着前端的快速发展,目前前端的开发已经变的越来越复杂了:  A. 比如开发过程中我们需要通过模块化的方式来开发;  B. 比如也会使用一些高级的特性来加快我们的开发效率或者安全性,比如通过ES6+、TypeScript开发脚本逻辑, 通过sass、less等方式来编写css样式代码;  C. 比如开发...

搭建前端监控系统(备选)用户行为统计和监控篇(如何快速定位线上问题)

背景:市面上的监控系统有很多,大多收费,对于小型前端项目来说,必然是痛点。另一点主要原因是,功能虽然通用,却未必能够满足我们自己的需求, 所以我们自给自足也许是个不错的办法。 这是搭建前端监控系统的第二章,主要是介绍如何统计js报错,跟着我一步步做,你也能搭建出一个属于自己的前端监控系统。 =================================...

前端日志

前端日志 现今有很多无法预知的错误出现,但又不是所有的错误都可以使用pc端的浏览器重现问题所在, 所以前端日志很有必要,日志的出现就是记录某些东西,让开发人员更好锁定问题所在,而后台 在这方面的工作就很完善,这样大大的提高追踪问题速度,然而前端的兼容性是一件很头痛的问题, 有可能写了一段很新的技术代码,然而某些浏览器不兼容而挂了,这样很可能无法追踪到问题,...

对百度WebUploader开源上传控件的二次封装,精简前端代码(两句代码搞定上传)

首先声明一下,我这个是对WebUploader开源上传控件的二次封装,底层还是WebUploader实现的,只是为了更简洁的使用他而已. 下面先介绍一下WebUploader 简介: WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势...

用谷歌浏览器来当手机模拟器

很多网站都通过User-Agent来判断浏览器类型,如果是3G手机,显示手机页面内容,如果是普通浏览器,显示普通网页内容。谷歌Chrome浏览器,可以很方便地用来当3G手机模拟器。在Windows的【开始】-->【运行】中输入以下命令,启动谷歌浏览器,即可模拟相应手机的浏览器去访问3G手机网页:谷歌Android: chrome.exe --user...

前端工程师必备实用网站

一、配色类网站 http://colorhunt.co 这个网站给我们提供了很多的配色方案,我们直接使用就OK了。使用方法也很简单,鼠标移动到对应的颜色上,我们就可以看到颜色的十六进制码,复制这个颜色到工具里就可以使用了。 https://color.adobe.com/zh/create/color-wheel 这个是Adobe公司出的,他提供了多种配...