【ChromDevTools】

1、如何打开DevTools。

  • 在Chrome菜单中选择 更多工具 > 开发者工具
  • 在页面元素上右键点击，选择 “检查”
  • 使用 快捷键 F12

2、切换 Device Mode 按钮可以打开或关闭 Device Mode。

　　

3、使用视口控件

　　

　　

利用视口控件，您可以针对各种设备测试网站，以及是否能够实现完全自适应。它包括以下两个模式：

  1. 自适应。使视口可以通过任意一侧的大手柄随意调整大小。
  2. 特定设备。将视口锁定为特定设备确切的视口大小，并模拟特定设备特性。

4、设置网络环境

　　

　　

ChromDevTools的更多相关文章

  1. vscode 搭建react-native

    vscode 搭建react-native 选择:vscode + typings + eslint * vscode: 宇宙最强IDE家族的最新产品 * typings: 基于typescirpt的 ...

随机推荐

  1. ROS进阶学习笔记（11）- Turtlebot Navigation and SLAM

    (写在前面: 这里参考rbx书中第八章和ROS社区教程进行学习,先看社区教程) ===  Doing the Turtlebot Navigation   === ref ros wiki: http ...

  2. 16.纯 CSS 创作一个渐变色动画边框

    原文地址:https://segmentfault.com/a/1190000014785816 感想:边框是伪元素::after来的: HTML代码: <div class="box ...

  3. hive sql 语句执行顺序及执行计划

    hive 语句执行顺序 from... where.... select...group by... having ... order by... 执行计划 Map Operator Tree: Ta ...

  4. kvm虚拟机相关

    一.虚拟机与宿主机鼠标不同步问题: https://blog.csdn.net/u012255731/article/details/53006195 先关闭虚拟机,想要修改鼠标和宿主机界面同步方法如 ...

  5. mysql高级聚合

    GROUP_CONCAT() 函数的值等于属于一个组的指定列的所有值,以逗号隔开,并且以字符串表示 mysql> select sex,group_concat(level) from role ...

  6. 原生JavaScript实现新手引导效果（第二个玩具）

    慕课地址https://www.imooc.com/video/169 预览效果: <!DOCTYPE html> <html> <head> <meta c ...

  7. android stuido的代码排版的快捷建CTRL+ALT+L

    CTRL+ALT+L 需要主要留意的地方是QQ的与其冲突的 我将qq的中快捷方式给去除

  8. 机器学习入门-数值特征-数据四分位特征 1.quantile(用于求给定分数位的数值) 2.plt.axvline(用于画出竖线) 3.pd.pcut(对特征进行分位数切分，生成新的特征)

    函数说明: 1.  .quantile(cut_list) 对DataFrame类型直接使用,用于求出给定列表中分数的数值,这里用来求出4分位出的数值 2.  plt.axvline()  # 用于画 ...

  9. +load +initialize

    +load方法 在app启动的时候各个类的+load方法都会被调用,+load方法不是通过消息机制调用的,它是直接调用的,因此无论是在子类或者category中复写此方法,复写的+load方法都会被调 ...

  10. 10：处理 json

    json 通用的数据类型, 所有的语言都认识.json 是字符串.key-value 必须使用双引号1. loads() 和 dumps() 的使用 json.loads() 将 json 字符串转换 ...