使用iframe和vconsole调试ios网页

最新推荐文章于 2024-04-04 17:43:03 发布

阿豪boy

最新推荐文章于 2024-04-04 17:43:03 发布

阅读量337

点赞数

文章标签： xss js gdb javascript webview

本文链接：https://blog.csdn.net/qq_35516360/article/details/122064823

版权

在低版本iOS浏览器中，由于版本不兼容，开启调试无法查看Webview或浏览器日志。本文介绍了利用iframe嵌入目标网页，并通过外部vconsole捕获和查看异常日志的方法，以解决调试难题。

摘要由CSDN通过智能技术生成

原文链接: 使用iframe和vconsole调试ios网页

上一篇: vue cli3 打包兼容Android 4.4

下一篇: 拷贝一个imageData, 避免多次向worker中发送数据导致的异常

首先在低版本的ios浏览器, 即使开启调试也因为电脑端版本太新, 无法查看webview或者浏览器中的log, 真的是垃圾

下载开发者版本的Safari也不行

https://developer.apple.com/safari/download/

只能使用一个壳子, 将目标网页放到iframe中, 然后在外部捕获异常, 在外部的vconsole中查看log信息

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

阿豪boy

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

移动端使用vConsole调试工具

有道无术，术尚可求

07-27

1827

移动端使用vConsole调试工具当项目在移动端运行时，也能具备像浏览器控制台一样的调试能力，方便debug 文章目录移动端使用vConsole调试工具一、vConsole是什么？二、使用步骤1.常规使用2.进阶一、vConsole是什么？平时web开发时，在手机上，如果是要看控制台信息，都需要alert弹窗，这样很不友好.还会阻拦进程。所以引入vconsole ,让手机具备有一定类似谷歌浏览器的调试能力效果图如下二、使用步骤 1.常规使用代码如下（示例）：直接可在项目上看到成效，

ios html 调试,使用iframe和vconsole调试ios网页

weixin_31641077的博客

06-04

540

首先在低版本的ios浏览器, 即使开启调试也因为电脑端版本太新, 无法查看webview或者浏览器中的log, 真的是垃圾下载开发者版本的Safari也不行只能使用一个壳子, 将目标网页放到iframe中, 然后在外部捕获异常, 在外部的vconsole中查看log信息Documentnew VConsole();setTimeout(function() {var f = document.c...

参与评论您还未登录，请先登录后发表或查看评论

html5 ios iframe src,如何让IFrame在iOS Safari中响应？

weixin_39654848的博客

06-16

283

问题在于，当您必须使用IFrame将内容插入网站时，那么在现代网络世界中，预计IFrame也会响应。从理论上讲，它很简单，只需要使用或设置CSS宽度，iframe { width: 100%; }但在实践中它并不是那么简单，但它可以。如果iframe内容完全响应并且可以在没有内部滚动条的情况下自行调整大小，那么iOS Safari将调整大小而iframe没有任何实际问题。如果您考虑以下代码：Ifr...

h5真机调试之ios和Android和vconsole

weixin_47409897的博客

07-16

1574

【代码】h5真机调试之ios和Android。

手机前端开发调试利器 – vConsole

weikehang的博客

01-16

362

手机前端开发调试利器 – vConsole

网页调试vconsole和eruda

weixin_42652622的博客

12-19

248

方法一：vconsole 预览地址：https://www.w3cways.com/demo/vconsole/ 官方文档：https://github.com/Tencent/vConsole/blob/dev/doc/tutorial_CN.md 使用方式：引入此js <head> <script src="https://www.w3cways.com/demo/vcon...

移动端（微信等使用vConsole调试console的方法

10-17

vConsole 是腾讯WeApp团队开发的一个轻量级的移动端Web控制台插件，它允许开发者在手机上查看和使用类似于Chrome开发者工具中的`console`，以便于在实际设备上调试JavaScript、CSS以及网络请求等问题。vConsole简单...

whistle.inspect:集成eruda和vConsole等调试H5页面工具的插件

05-22

该whistle插件集成了和等用来在移动端页面上模拟Chrome开发者工具功能的模块，方便调试手机上的H5页面，只需简单配置即可随意切换vConsole和eruda。更多移动端调试方法参见：。安装首先需要安装最新版，如果你的...

vconsole助力实现在线代码编辑调试

最新发布

LZUGIS

04-04

469

前面有文章[monaco-editor做自己的代码测试工具](http://t.csdnimg.cn/R0Qyo) ，本文书接前文，在代码中加入`vconsole`工具，可以进行代码调试、查看网络、查看元素等。

Vue开发移动端项目，这个工具对你一定有帮助

三翼鸟数字化平台的技术实践分享

10-18

358

基于Vue.js开发移动端工程时，一些特定的问题和场景下，只能在移动端运行工程复现、追踪问题（比如在微信端内，在App容器内），桌面端的Devtools就没法用了。数次安装Electron版本devtools后，觉得调试起来太麻烦了，所以我决定把devtools搬进vConsole里。

H5页面在移动端文件中引入vconsole查看页面报错信息

蒙双眼看世界

12-15

1993

二、使用 es6 webpack 引入。（这种我没实践过，记录下有需要的自己验证。可以在页面中看vconsole打印的值了。一、在html中的head,加入如下代码。设置一下，开发环境用vconsole。vconsole.min.js的源码。

借助FreeHttp为任意移动端web网页添加vConsole调试

weixin_30848775的博客

06-19

1173

以下介绍在不用修改代码并发布项目的情况下，为我们日常使用的移动web应用（如手机web淘宝）添加vConsole调试工具的方法 vConsole介绍 vConsole是一个轻量、可拓展、针对手机网页的前端开发者调试面板。使用vConsole的项目可以让手机上的Web浏览器，拥有类似PC调试工具的能力。正常情况下使用vConsole需要...

移动端真机调试指南

qq_36262295的博客

07-08

860

移动端调试指南

移动端调试功能（兼容ios及安卓端）

lwdyxweb的博客

05-09

224

第一步：在head标签中引入第二步：初始化 var vConsole = new VConsole();

iframe不能显示内容的问题