Comments (18)
Inspect the inspector, use Device Mode in desktop mode, stretch viewport to 9000px wide, grab the Timeline's , toDataURL() it, set to img[src], download, print.
from weekly.
@alcat2008 这个网站强势
文中的技巧都是非常有用的,顺便补充下:
在 All In 无线的时代,移动端的调试比较蛋疼。
- 浏览器无法完全模拟手机(手势啊、iOS的橡皮筋啊、原生滚动事件什么时候触发啊、滚动起来背景动不动啊、滚动起来滑不滑啊、浮层能不能弹起来啊等等等)
- 手机系统、浏览器不同会遇到不同的问题
- Hybride 下的 WebView 又会出现一系列的问题
- 移动端下 log 查看(微信团队的 vConsole / AlloyTeam 的 Rosin、聚划算的momoda(好像只在阿里内部有,没放出来?) / 建立报错日志上传体系)
- 最后还是靠经验XD,顺便骂一下华为手机🙃
一些链接:
- http://www.alloyteam.com/2015/03/mobile-web-debug-tool-rosin/
- http://yujiangshui.com/multidevice-frontend-debug/
- https://developer.chrome.com/devtools/index
from weekly.
提到调试,怎么能少得了 dev-tips,满满的 dev tips
from weekly.
- 对于特定业务场景也可以通过开发 chrome 插件来做,比如分析自己网站的结构、版本、代码开发责任人、一键切换开发环境什么的。。
- 移动端调试的话,之前有同事做过 reactNative 远程调试,就是把控制台输出信息打到服务器,本地通过与服务器建立 socket 链接实时查看控制台信息。要知道实时根据用户 id 开启调试信息,并看用户真是环境的控制台打印信息是非常有用的,能解决很多难以复现问题。
- DOM 断点,在 dom 元素右键,选择 (Break on subtree modifications),可以在此 dom 被修改时触发断点,在你不知道 dom 被哪段 js 脚本修改时可能有用。
- Event Listener Breakpoints,神器之一,对于任何事件都能进入断点,比如 click,touch, script 事件统统能监听。
from weekly.
这期精读开的口子有点大了,我整理起来压力很大,最近被忙死了。。
from weekly.
技巧还是你们谈吧哈哈, 就不献丑了. 不过可以看下chrome 60, 新增了一些关于调试的东西
from weekly.
文章本身是科普型的,有关代码调试技巧我们可以来补充 :p
from weekly.
@ascoders 哈哈,这是 debug 界的 O2O 吗?
from weekly.
如果移动端的浏览器可以打开控制台就好了
from weekly.
@DanielWLam 可以试试微信团队的 vConsole,可以解决大部分场景
from weekly.
@DanielWLam 当然可以,至少 Chrome 和 Safari 是可以的;
Chrome 打开这个地址 chrome://inspect/#devices
不知道咋用可以去 google
Safari 在 Develop
菜单里面 可以看见你开启了 Web检查器
选项的设备
from weekly.
文章有很多有用的插件,还没一个一个试用完。说下大家可能都知道的tips吧
-
fiddle 用本地文件替换生产环境的 js, css ,完全模拟生成环境线上调试Bug。
-
firefox 的3D 视图,看 div 的层级关系很有意思。以前 firefox 是自带这个配置,现在要安装Tilt 插件。
from weekly.
@rccoder vConsole 是解决移动端场景吧,webview 链接不上 chrome 的时候,可以内嵌进去调试,很方便。
from weekly.
@DanielWLam 手机端调试工具类似 eruda 这种已经有不少了,感觉 eruda 还是可以一用的
from weekly.
@hsuanxyz chrome的那个方案,看了一下是调试webview的 https://developers.google.com/web/tools/chrome-devtools/remote-debugging/webviews ?没看明白。其他方案基本都是要引入脚本,有点不优雅
from weekly.
@DanielWLam chrome的方案,前端不需引入脚本,只需要 app 支持 setWebContentsDebuggingEnabled
即可。
from weekly.
mark
from weekly.
web抓包调试工具可以试试whistle:https://github.com/avwo/whistle,看了下这篇文章里面提到的功能基本上它都有,绝大数操作只需简单的配置,且支持通过Node模块扩展功能,关于移动端调试可以看下这篇文章:利用whistle调试移动端页面
from weekly.
Related Issues (20)
- 可视化搭建 - 自动批处理与冻结 HOT 2
- 可视化搭建 - 场景实战
- 加班中,请假一次 HOT 1
- 【自荐开源】AI可视化SolidUI HOT 2
- 精读《自由 + 磁贴混合布局》
- 请假一次 🏳️
- 精读《自由布局吸附线的实现》
- 请假一次 HOT 1
- 精读《算法题 - 通配符匹配》
- 这里我想是对应的 '*' 不匹配任何字符? HOT 1
- 精读《算法题 - 统计可以被 K 整除的下标对数目》
- 精读《算法题 - 最小覆盖子串》
- 请假一次
- 精读《算法题 - 地下城游戏》
- 请假一次 HOT 6
- 精读《VisActor 数据可视化工具》
- 精读《算法题 - 编辑距离》
- 请假一次
- 精读《算法题 - 二叉树中的最大路径和》
- 休刊一段时间 HOT 8
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from weekly.