CN106997321A

CN106997321A - Css调试方法及装置

Info

Publication number: CN106997321A
Application number: CN201610049848.2A
Authority: CN
Inventors: 巴雨维
Original assignee: Alibaba Group Holding Ltd
Current assignee: Advanced New Technologies Co Ltd; Advantageous New Technologies Co Ltd
Priority date: 2016-01-25
Filing date: 2016-01-25
Publication date: 2017-08-01

Abstract

本发明是关于一种CSS调试方法及装置，其方法包括：监测浏览器是否对加载的网页中CSS产生触发事件；当监测到浏览器对加载的网页中CSS产生触发事件时，获取所述触发事件；根据所述触发事件修改所述CSS对应的源文件。这样可以很方便解决目前网页CSS调试存在的过程繁琐、不能实时同步以及操作不便等问题，大大提高了开发人员的工作效率。

Description

CSS调试方法及装置

技术领域

本发明涉及信息技术领域，尤其涉及一种CSS调试方法及装置。

背景技术

开发人员在进行CSS(Cascading Style Sheets，层叠样式表)开发过程中，如果编写完成代码，还需要将编写好的代码通过浏览器打开，以便查看编写好的代码是否达到预期的效果。然而，在开发过程中，开发人员开发完成的代码很难一次性满足实际的需要，如果通过浏览器查看到编写好的代码达不到预期的效果，开发人员还需要利用浏览器提供的开发工具在线修改代码，并将修改后代码拷贝出来，粘贴到CSS源文件中保存。

由于在开发阶段通常需要不断的对CSS的样式进行调整，而每次利用浏览器提供的开发工具修改完代码后，还需要将修改后的代码拷贝出来，粘贴到CSS源文件中。这样不断地重复复制粘贴的操作，严重影响了开发人员的工作效率。

发明内容

为克服相关技术中存在的问题，本发明提供一种CSS调试方法及装置。

根据本发明实施例的第一方面，提供一种CSS调试方法，包括：

监测浏览器是否对加载的网页中CSS产生触发事件；

当监测到浏览器对加载的网页中CSS产生触发事件时，获取所述触发事件；

根据所述触发事件修改所述CSS对应的源文件。

可选地，所述根据所述触发事件修改所述CSS对应的源文件，包括：

将所述触发事件解析，得到修改信息；所述修改信息包括：修改位置和修改内容；

获取所述CSS对应的源文件；

查找所述源文件中所述修改位置上的文件内容；

根据所述修改内容修改所述文件内容。

可选地，所述获取所述触发事件，包括：

利用套接字socket方式与所述浏览器建立通信连接；

接收所述浏览器通过所述socket方式发送的所述触发事件。

可选地，在所述监测浏览器是否对加载的网页中CSS产生触发事件之前，包括：

利用所述浏览器加载所述网页；

通过所述浏览器内置的前端调试工具显示所述网页中CSS的显示内容。

可选地，还包括：

保存修改后的源文件；

将修改后的源文件备份到预设位置。

根据本发明实施例的第二方面，提供一种CSS调试装置，包括：

监测模块，用于监测浏览器是否对加载的网页中CSS产生触发事件；

触发事件获取模块，用于在监测到浏览器对加载的网页中CSS产生触发事件时，获取所述触发事件；

文件修改模块，用于根据所述触发事件修改所述CSS对应的源文件。

可选地，所述文件修改模块，包括：

解析子模块，用于将所述触发事件解析，得到修改信息；所述修改信息包括：修改位置和修改内容；

文件获取子模块，用于获取所述CSS对应的源文件；

内容查找子模块，用于查找所述源文件中所述修改位置上的文件内容；

内容修改子模块，用于根据所述修改内容修改所述文件内容。

可选地，所述触发事件获取模块，包括：

通信连接子模块，用于利用套接字socket方式与所述浏览器建立通信连接；

接收子模块，用于接收所述浏览器通过所述socket方式发送的所述触发事件。

可选地，还包括：

网页加载模块，用于利用所述浏览器加载所述网页；

内容显示模块，用于通过所述浏览器内置的前端调试工具显示所述网页中CSS的显示内容。

可选地，还包括：

文件保存模块，用于保存修改后的源文件；

文件备份模块，用于将修改后的源文件备份到预设位置。

本发明的实施例提供的技术方案可以包括以下有益效果：

本发明提供的CSS调试方法及装置，通过监测浏览器是否对加载的网页中CSS产生触发事件；当监测到浏览器对加载的网页中CSS产生触发事件时，获取所述触发事件；根据所述触发事件修改所述CSS对应的源文件。这样可以很方便解决目前网页CSS调试存在的过程繁琐、不能实时同步以及操作不便等问题，大大提高了开发人员的工作效率。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本发明。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本发明的实施例，并与说明书一起用于解释本发明的原理。

图1是根据一示例性实施例示出的一种CSS调试方法的流程图；

图2是图1中步骤S130的流程图；

图3是图1中步骤S120的流程图；

图4是根据一示例性实施例示出的一种CSS调试方法的流程图；

图5是根据一示例性实施例示出的一种CSS调试方法的流程图；

图6是根据一示例性实施例示出的一种CSS调试装置的示意图；

图7是图6中文件修改模块的示意图；

图8是图6中触发事件获取模块的示意图；

图9是根据一示例性实施例示出的一种CSS调试装置的示意图；

图10是根据一示例性实施例示出的一种CSS调试装置的示意图。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本发明相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本发明的一些方面相一致的装置和方法的例子。

为了解决目前网页CSS调试存在的过程繁琐，不能实时同步以及操作不便等问题，以提高开发人员的工作效率。本发明实施例首先提供了一种CSS调试方法，如图1所示，该方法可以包括如下步骤：

在步骤S110中，监测浏览器是否对加载的网页中CSS产生触发事件。

在将CSS文件正式应用于某一网页之前，需要对该CSS进行调试，通过对比该CSS的实际展示效果与预期效果之间的差异来不断加以改进、完善。如果该CSS的实际展示效果不及预期效果，那么开发人员就需要对该CSS进行调试。

目前通用的CSS调试做法是利用CSS开发工具(例如Eclipse)开发的CSS文件与某一待展示网页相关的其他必要文件一起存放于后端网页服务器上；通过浏览器加载待展示的网页，该加载的网页中显示出与该CSS文件相应的展示效果；调出内置在浏览器中的前端CSS调试工具(例如F-irebug)，在浏览器显示网页的同时利用该工具显示出网页CSS的内容；通过对照所述网页在浏览器中的显示效果，利用所述前端CSS调试工具对网页CSS进行修改、删除、添加等变更操作；记录所述前端CSS调试工具对网页CSS的变更操作，并利用前述的CSS开发工具将网页CSS变更后的内容复制并粘贴到存放于后端网页服务器的实际CSS文件中。因此，本发明实施例中为了提高开发人员的工作效率，对浏览器对加载的网页中CSS产生的触发事件进行检测。该触发事件会包含开发人员对CSS代码的修改信息。

需要说明的是，虽然一般情况下CSS对应的源文件保存在后端服务器中，但在开发人员对CSS调试的过程中，该CSS对应的源文件还可以保存在于浏览器所在的同一终端上，这样便于开发人员对CSS对于的源文件维护。当然，在CSS的源文件位于服务器上时，开发人员可以在终端上直接访问其服务器，在后续获取浏览器产生的触发事件时，可以通过socket等方式建立终端与服务器之间的长连接，实时获取浏览器产生的触发事件，便于及时对应修改CSS对应的源文件。

当监测到浏览器对加载的网页中CSS产生触发事件时，在步骤S120中，获取触发事件。

在开发人员调整了程序的代码之后，及时获取到浏览器对加载的网页中CSS产生的触发事件，以便后续根据该触发事件及时修改CSS对应的源文件。

在步骤S130中，根据触发事件修改CSS对应的源文件。

由于浏览器及浏览器中提供的前端开发工具无法保存修改后的程序代码，为了避免开发人员重复将修改后的代码复制出来粘贴到CSS对应的源文件中，以实现对源文件的更新，这里可以在获取到触发事件之后，针对触发事件中包含的修改信息，直接对CSS对应的源文件中的内容进行修改。

为了详细阐述如何根据获取到的触发事件修改CSS对应的源文件，在本发明提供的又一实施例中，作为图1方法的细化，如图2所示，步骤S130可以包括如下步骤：

在步骤S131中，将触发事件解析，得到修改信息。

该触发事件是浏览器生成的，由于浏览器有多种类型，不同浏览器产生的触发事件采用的格式等不同，需要将浏览器产生的触发事件解析为可识别的修改信息。其中，修改信息包括：修改位置和修改内容。

在步骤S132中，获取CSS对应的源文件。

由于CCS对应的源文件保存在终端或服务器中，可以在程序源代码目录中查找CSS对应的源文件存放路径，进而获取到CSS对应的源文件。

在步骤S133中，查找源文件中修改位置上的文件内容。

根据修改信息中的修改位置，可以查找到源文件上对应的文件内容。

在步骤S134中，根据修改内容修改文件内容。

可以根据修改信息中的修改内容对源文件修改位置上的文件内容进行修改。

为了详细阐述如何获取浏览器产生的触发事件，在本发明提供的又一实施例中，作为图1方法的细化，如图3所示，步骤S120可以包括如下步骤：

在步骤S121中，利用套接字socket方式与浏览器建立通信连接。

在步骤S122中，接收浏览器通过socket方式发送的触发事件。

网络上的两个程序通过一个双向的通信连接实现数据的交换，这个连接的一端称为一个socket。在浏览器中安装的监测插件具体可以通过socket的方式进行CSS变更信息的发送。该socket是一种比http更为底层的通信方式，与http不同的是，socket通信属于长连接，当连接建立以后，便可以在客户端(此处对应于监测插件)与服务器端(此处对应于CSS对应的源文件编辑工具)之间进行实时、双向的数据收发。具体而言，所述监听插件可以通过向CSS文件编辑工具发起socket请求并在请求中携带所述CSS触发事件的方式来实现获取触发事件。

在本发明提供的又一实施例中，作为图1方法的细化，如图4所示，在步骤S110之前，还可以包括以下步骤：

在步骤S140中，利用浏览器加载网页。

在步骤S150中，通过浏览器内置的前端调试工具显示网页中CSS的显示内容。

由于CSS是一种不需要编译而可以由浏览器直接执行的语言。就CSS在网页发挥表现效果的作用而言，可以分成两个部分：一部分是后端存放的CSS对应的源文件，由开发人员所开发并与网页相关的其他有用文件(例如页面文件、数据库文件等等)一起存放于后端网页服务器上；另一部分是前端显示的网页CSS，具体而言，相对于后端网页服务器而言处于前端的浏览器在通过输入地址等操作加载上述存放于后端网页服务器的网页页面时，便可直接调用同样存放于后端网页服务器的CSS文件，将其对应的表现效果显示在浏览器加载的网页页面中，相对于前述存放于后端网页服务器的实际CSS文件，在浏览器中利用浏览器内置的前端调试工具显示的这一部分可以称之为网页CSS。

通过利用浏览器内置的前端调试工具显示网页中CSS的显示内容，以便开发人员将该显示内容与预期的显示内容进行比对，如果当前的显示内容与预期显示内容相比还有差距，那么开发人员就可以调整CSS代码，使得其显示内容效果可以达到预期显示效果。

为了进一步处理修改后的CSS对应的源文件，作为图1方法的细化，在本发明的另一实施例中，如图5所示，该方法还可以包括如下步骤：

在步骤S170中，保存修改后的源文件。

在步骤S180中，将修改后的源文件备份到预设位置。

在将CSS对应的源文件相应修改后，还需要进行保存。另外，还可以将修改后的源文件备份到其他位置，以便在需要找回该修改后的源文件时，可以从备份的位置恢复出来。

通过以上的方法实施例的描述，所属领域的技术人员可以清楚地了解到本发明可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：只读存储器(ROM)、随机存取存储器(RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

另外，作为对上述各实施例的实现，本发明实施例还提供了一种CSS调试装置，如图6所示，该装置包括：监测模块10、触发事件获取模块20和文件修改模块30，其中，

监测模块10，用于监测浏览器是否对加载的网页中CSS产生触发事件；

触发事件获取模块20，用于在监测到浏览器对加载的网页中CSS产生触发事件时，获取所述触发事件；

文件修改模块30，用于根据所述触发事件修改所述CSS对应的源文件。

在本发明又一实施例中，基于图6，如图7所示，所述文件修改模块30，包括：解析子模块31、文件获取子模块32、内容查找子模块33和内容修改子模块34，其中，

解析子模块31，用于将所述触发事件解析，得到修改信息；所述修改信息包括：修改位置和修改内容；

文件获取子模块32，用于获取所述CSS对应的源文件；

内容查找子模块33，用于查找所述源文件中所述修改位置上的文件内容；

内容修改子模块34，用于根据所述修改内容修改所述文件内容。

在本发明又一实施例中，基于图6，如图8所示，所述触发事件获取模块20，包括：通信连接子模块21和接收子模块22，其中，

通信连接子模块21，用于利用套接字socket方式与所述浏览器建立通信连接；

接收子模块22，用于接收所述浏览器通过所述socket方式发送的所述触发事件。

在本发明又一实施例中，基于图6，如图9所示，该装置还包括：网页加载模块40和内容显示模块50，其中，

网页加载模块40，用于利用所述浏览器加载所述网页；

内容显示模块50，用于通过所述浏览器内置的前端调试工具显示所述网页中CSS的显示内容。

在本发明又一实施例中，基于图6～9，如图10所示，该装置还可以包括：文件保存模块60和文件备份模块70，其中，

文件保存模块60，用于保存修改后的源文件；

文件备份模块70，用于将修改后的源文件备份到预设位置。

关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

可以理解的是，本发明可用于众多通用或专用的计算***环境或配置中。例如：个人计算机、服务器计算机、手持设备或便携式设备、平板型设备、多处理器***、基于微处理器的***、置顶盒、可编程的消费电子设备、网络PC、小型计算机、大型计算机、包括以上任何***或设备的分布式计算环境等等。

本发明可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本发明，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

需要说明的是，在本文中，诸如“第一”和“第二”等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本发明的其它实施方案。本申请旨在涵盖本发明的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本发明的一般性原理并包括本发明未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本发明的真正范围和精神由下面的权利要求指出。

应当理解的是，本发明并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本发明的范围仅由所附的权利要求来限制。

Claims

1.一种CSS调试方法，其特征在于，包括：

监测浏览器是否对加载的网页中CSS产生触发事件；

根据所述触发事件修改所述CSS对应的源文件。

2.根据权利要求1所述的CSS调试方法，其特征在于，所述根据所述触发事件修改所述CSS对应的源文件，包括：

获取所述CSS对应的源文件；

查找所述源文件中所述修改位置上的文件内容；

根据所述修改内容修改所述文件内容。

3.根据权利要求1所述的CSS调试方法，其特征在于，所述获取所述触发事件，包括：

利用套接字socket方式与所述浏览器建立通信连接；

接收所述浏览器通过所述socket方式发送的所述触发事件。

4.根据权利要求1所述的CSS调试方法，其特征在于，在所述监测浏览器是否对加载的网页中CSS产生触发事件之前，包括：

利用所述浏览器加载所述网页；

5.根据权利要求1～4中任一所述的CSS调试方法，其特征在于，还包括：

保存修改后的源文件；

将修改后的源文件备份到预设位置。

6.一种CSS调试装置，其特征在于，包括：

7.根据权利要求6所述的CSS调试装置，其特征在于，所述文件修改模块，包括：

文件获取子模块，用于获取所述CSS对应的源文件；

8.根据权利要求6所述的CSS调试装置，其特征在于，所述触发事件获取模块，包括：

9.根据权利要求6所述的CSS调试装置，其特征在于，还包括：

网页加载模块，用于利用所述浏览器加载所述网页；

10.根据权利要求6～9中任一所述的CSS调试装置，其特征在于，还包括：

文件保存模块，用于保存修改后的源文件；

文件备份模块，用于将修改后的源文件备份到预设位置。