CN103595742B - 调试网页css的方法及装置 - Google Patents

Abstract

本申请实施例公开了一种调试网页层叠样式表CSS的方法，该方法包括以下步骤：S1.在加载网页的浏览器中监听前端调试工具对所述网页中CSS的变更；S2.将监听到的CSS变更信息发送到与所述网页对应的CSS文件的编辑工具；S3.在所述编辑工具中按照所述CSS文件所包含的从属继承关系展示接收到的所述CSS变更信息，以供对所述CSS文件进行编辑。本申请实施例相应还提供一种调试网页CSS的装置。本申请实施例调试网页CSS的方法及装置，能够将监听到的前端调试工具对网页CSS的变更同步到CSS文件的编辑工具，从而可以实时将网页CSS的变更应用于后端网页服务器的CSS文件中，便利地实现了网页CSS的调试。

Description

调试网页CSS的方法及装置

技术领域

本申请涉及网络通信技术领域，尤其涉及一种用于对网页CSS(Cascading StyleSheets，层叠样式表)进行调试的方法及装置。

背景技术

CSS是一种计算机标记语言，其在标准网页设计中负责网页内容的表现。相对于传统HTML的表现而言，CSS能够对网页中各个显示对象的位置排版进行像素级的精确控制，支持几乎所有的字体、字号、样式，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言之一。在CSS发挥网页内容表现作用的过程中，由开发人员(例如网页设计人员)开发的CSS文件被存放在后端的网页服务器，虽然其必须以css作为后缀，但同时可以将其理解成一个包含有各种CSS标记的文本文件；该CSS文件进而在客户端可以由浏览器调用、加载并直接加以执行(无需编译)，从而将开发人员所期望表现的效果展示在浏览器中供用户浏览。

在将CSS文件正式应用于某一网页之前，还有必要对其进行调试，通过对比实际展示效果与预期效果之间的差异来不断加以改进、完善。目前通用的CSS调试做法是：将利用CSS开发工具(例如Eclipse)开发的CSS文件与某一待展示网页相关的其他必要文件一起存放于后端网页服务器上；通过浏览器加载所述待展示网页，该加载的网页中显示出与所述CSS文件相应的展示效果；调出内置在所述浏览器中的前端CSS调试工具(例如Firebug)，在浏览器显示网页的同时利用该工具显示出网页CSS的内容；通过对照所述网页在浏览器中的显示效果，利用所述前端CSS调试工具对网页CSS进行修改、删除、添加等变更操作；记录所述前端CSS调试工具对网页CSS的变更操作，并利用前述的CSS开发工具将网页CSS变更后的内容复制并粘贴到存放于后端网页服务器的实际CSS文件中。

由上述内容可知，目前的网页CSS调试过程相当繁琐，并且前端调试工具的变更操作不能实时同步到后端网页服务器的CSS文件中，一旦在调试过程中浏览器所加载的网页意外发生刷新或关闭等情况时，所有的变更操作都会被清除；另外，在前端调试工具完成变更操作而后需要将这些变更应用于后端网页服务器的CSS文件时，还要依赖传统的手动复制粘贴方式，操作相当不便。

发明内容

本申请的实施例旨在提供一种调试网页CSS的方法及装置，以解决目前网页CSS调试存在的过程繁琐、不能实时同步以及操作不便等问题。

为实现上述目的，本申请的实施例提供了一种调试网页CSS的方法，该方法包括以下步骤：

S1.在加载网页的浏览器中监听前端调试工具对所述网页中CSS的变更；

S2.将监听到的CSS变更信息发送到与所述网页对应的CSS文件的编辑工具；

S3.在所述编辑工具中按照所述CSS文件所包含的从属继承关系展示接收到的所述CSS变更信息，以供对所述CSS文件进行编辑。

本申请的实施例还提供一种调试网页CSS的装置，该装置包括：

监听模块，用于在加载网页的浏览器中监听前端调试工具对所述网页中CSS的变更；

通信模块，用于将所述监听模块监听到的CSS变更信息发送到与所述网页对应的CSS文件的编辑工具；

处理模块，在所述编辑工具中按照所述CSS文件所包含的从属继承关系展示接收到的所述CSS变更信息，以供对所述CSS文件进行编辑。

由上述技术方案可知，本申请实施例调试网页CSS的方法及装置，能够将监听到的前端调试工具对网页CSS的变更同步到CSS文件的编辑工具，从而可以实时将网页CSS的变更应用于后端网页服务器的CSS文件中，便利地实现了网页CSS的调试。

附图说明

图1为本申请调试网页CSS的方法实施例一流程图；

图2为本申请调试网页CSS的方法实施例二流程图；

图3为本申请调试网页CSS的装置实施例结构图。

具体实施方式

下面将详细描述本申请的具体实施例。应当注意，这里描述的实施例只用于举例说明，并不用于限制本申请。

本申请调试网页CSS的方法，是用于将前端网页CSS的变更应用到存放于后端网页服务器的网页所对应的CSS文件中，图1为该方法的实施例一流程图，如图所示，本实施例调试网页CSS的方法包括以下步骤S101-S103。

S101.在加载网页的浏览器中监听前端调试工具对网页中CSS的变更；

S102.将监听到的CSS变更信息发送到CSS文件的编辑工具；

参考本申请背景技术部分的描述可知，目前调试网页CSS的通用做法是先记录前端调试工具对CSS所做的变更，待变更完成后再利用CSS开发工具(此处也称为编辑工具)根据上述记录将变更后的内容手动复制粘贴到后台的CSS文件中。而在本实施例的技术方案中，步骤S101可以在加载网页的浏览器中对前端调试工具所进行的CSS变更进行监听，而一旦监听到任何变更，步骤S102紧接着便可以实时地将监听到的CSS变更信息发送到CSS文件的编辑工具中。

S103.在编辑工具中按照CSS文件所包含的从属继承关系展示接收到的CSS变更信息，以供对CSS文件进行编辑。

参考本申请背景技术部分的描述可知，在目前网页CSS的调试过程中，即使获得了前端调试工具针对网页CSS的完整变更记录，但在需要将这些变更应用于后端网页服务器的CSS文件时，仍然要依赖手动的复制粘贴方式。而在本实施例的技术方案中，步骤S103可以在编辑工具中按照CSS文件所包含的从属继承关系来显示从前端接收到的CSS变更信息，同时可以提供与变更信息对应的修改、增加、删除等编辑操作。

综上所述，基于本实施例调试网页CSS的方法，调试人员在前端调试工具中针对网页CSS所作的变更，不仅可以实时同步到CSS文件的编辑工具上，并且这些变更可以按照CSS文件自身所包含的从属继承关系加以显示，从而将对应CSS文件中产生变更的内容和位置清楚、明确地显示在编辑工具中；同时通过在所显示的内容和位置处添加对应的修改、增加、删除等编辑操作选项(例如菜单或按钮)，由此调试人员不仅可以清楚地看到CSS文件中产生变更的内容和位置，而且可以简单地通过上述提供的编辑操作选项来进行CSS文件的编辑，从而便利地完成网页CSS的调试。

图2为本申请的调试网页CSS的方法实施例二流程图，如图所示，本实施例的方法包括以下步骤S201-S206。

S201、利用浏览器加载存放于后端网页服务器的网页并加以显示，同时利用内置于浏览器的前端调试工具显示网页中所包含的CSS；

S202、对照网页在浏览器中的显示效果利用前端调试工具对CSS进行变更；

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

针对上述网页CSS，相关技术中已提供有成熟的前端调试工具。以Firefox(火狐)浏览器为例，便有一款名为Firebug的开发类插件，其集HTML查看和编辑、JavaScript控制台、网络状况检测器于一体，是开发JavaScript、CSS和HTML等的高效工具之一。利用Firefox浏览器配合Firebug这类前端调试工具(插件)，可以在显示网页的同时清楚显示出网页中所包含的CSS，并可通过对照网页的显示效果对网页CSS进行变更，以达到预期的CSS表现效果。然而，前端调试工具对网页CSS所进行的变更仅仅是一次性的，一旦浏览器加载的网页被刷新或者关闭，所有变更都会被清除。因此，要想使前端调试工具的CSS变更永久地发挥作用，还需要将这些变更应用于后端网页服务器的实际CSS文件上。相关技术中是通过手动复制粘贴的方式来完成上述从前端CSS变更到后端CSS文件的应用过程，不仅过程繁琐并且存在工作量重复(例如，在前端调试工具变更CSS时浏览器因意外而刷新或关闭，所有变更操作都要重新进行)的风险，而本实施例中是通过后续步骤来实时、自动、便利地完成这一应用。

基于以上所述，就步骤S201-S202而言，在一个实施例中，上述的浏览器可以是Firefox浏览器，对应的前端调试工具可以是Firebug插件，后续的步骤将延续这一实施例进行描述。但本领域技术人员可知，上述浏览器和前端调试工具的实施并不仅限于此，例如浏览器还可以是Chrome浏览器、IE浏览器和Opera浏览器等等，而与这些浏览器搭配使用的前端调试工具例如可以是Firebug Lite等等，在不脱离本申请的精神及实质范围的条件下，本领域技术人员可以做任意的替换和变更。

S203、在浏览器中监听前端调试工具对网页中CSS的变更；

S204、通过socket(套接字)请求将监听到的CSS变更信息发送到CSS文件的编辑工具；

与目前在前端调试工具对CSS的变更完成之后再将变更应用于CSS文件不同，本实施例步骤S203中是对前端调试工具所做的CSS变更进行实时监听。在一个实施例中，步骤S203的监听可以通过在浏览器中内置插件来实现。仍以Firefox浏览器为例，与其内置Firebug插件作为前端调试工具类似，此处也可以在Firefox浏览器中内置监听插件，该插件扩展于Firebug。在一个实施例中，上述监听插件具体可以监听Firebug中CSS editor(CSS编辑器)上CSS的set(设置)和remove(移除)事件，当使用Firebug在浏览器网页调试CSS而触发set和remove事件时，该监听插件可以监听到网页CSS的具体变更信息，进而如步骤S204所述将CSS变更信息发送到CSS文件的编辑工具。

就步骤S204中的发送而言，在一个实施例中，上述监听插件具体可以通过socket请求的方式进行CSS变更信息的发送。这里，上述提及的socket通信是一种比http更为底层的通信方式，与http不同的是，socket通信属于长连接，当连接建立以后，便可以在客户端(此处对应于监听插件)与服务器端(此处对应于CSS文件编辑工具)之间进行实时、双向的数据收发。具体而言，所述监听插件可以通过向CSS文件编辑工具发起socket请求并在请求中携带所述CSS变更信息的方式来实现步骤S204的发送。然而，本领域技术人员可知，从浏览器向编辑工具发送CSS变更信息并不限于此处所述的socket通信方式，在不脱离本申请精神和实质范围的前提下，本领域技术人员可做适当变更。例如，在一个实施例中还可以采用http通信的方式来实现CSS变更信息的传送，具体可以开发基于http的web应用程序来作为处理客户端所发送信息的服务器端，同时该web应用程序还可提供特定的页面用来展示数据处理结果，例如处理成功、对应的CSS文件不存在等等。

S205、在编辑工具中对接收到的socket请求进行数据处理，以得到请求中携带的CSS变更信息；

S206、在编辑工具中按照CSS文件所包含的从属继承关系展示CSS变更信息，并提供与变更信息对应的修改、增加、删除等编辑操作。

S207、在编辑工具中显示与CSS文件的编辑结果相关的处理成功的提示，或者处理失败和/或失败原因的提示。

相对于内置在前端浏览器中用来对网页CSS进行调试的所述前端调试工具而言，这里的编辑工具是指对存放于后端网页服务器的CSS文件进行编辑的工具。尽管如此，这并不意味着该编辑工具也必须与CSS文件一起位于后端网页服务器上；在一个实施例中，编辑工具可以与浏览器安装于同一台计算机上，而通过远程访问的方式来对后端网页服务器上的CSS文件进行编辑，从而调试人员在一台计算机上便可实现利用前端调试工具对网页CSS进行调试以及利用编辑工具对CSS文件进行编辑；在另一个实施例中，编辑工具与浏览器还可以一起安装在网页服务器上，从而在网页服务器上即可完成对网页CSS的调试以及对CSS文件的编辑。

接续，在一个实施例中，所述的编辑工具即可以为CSS文件的开发程序，例如Eclipse、Aptana、Netbeans、Intellij idea等等。类似于前述为实现步骤S203而开发基于Firefox浏览器的监听插件，在一个实施例中，此处为了实现步骤S205的数据处理，也可以在编辑工具的框架下设置相关的处理插件，例如基于Eclipse框架的插件，出于简便描述的目的，下文中均以此Eclipse插件为例进行描述。

进一步，该Eclipse插件可以接收上述监听插件发送的socket请求，并进行数据处理而得到该请求所携带的CSS变更信息，进而使Eclipse可以按照CSS文件自身所包含的从属继承关系来详细展示相关的CSS变更。具体而言，基于开发人员根据不同网页表现需求所进行的不同设计，每个CSS文件都有自身所特有的从属继承关系，例如以如下代码为例：

其中“lw1”和“td”可以认为属于该CSS文件下的选择器，对应于网页上的两个class属性，而这两个class属性之下又分别对应“color、width”和“ling-height、padding”两组不同的属性值。所有这些对应关系的总和便可以理解为该CSS文件自身的从属继承关系。

接续，参见本申请背景技术部分的描述可知，在目前常见的调试做法下，由于前端调试工具在浏览器下所进行的CSS变更必须通过手动复制粘贴的方式来应用到后端网页服务器的CSS文件中，调试人员需要通过逐一对照的操作来进行CSS文件的编辑，不仅无法按照CSS文件的从属继承关系来体现CSS变更的内容，而且往往容易产生疏漏；而在本实施例中，通过上述Eclipse插件不仅可以从前端Firefox浏览器的监听插件处实时接收到前端调试工具所作的CSS变更信息，而且还可以通过数据处理将这些变更信息按照当前CSS文件自身的从属继承关系展示在Eclipse中，从而清楚、明确地显示出前端调试工具对网页CSS所进行的变更。

在一个实施例中，上述Eclipse插件在按照CSS文件自身从属继承关系展示CSS变更信息的基础上，还可以提供与变更信息对应的修改、增加、删除等编辑操作选项。例如，Eclipse插件可以在Eclipse打开的CSS文件中显示出变更信息的对应位置处，设置一个与该处变更相应的选择菜单或按钮，调试人员通过点选该处菜单或按钮，便可由Eclipse插件相应自动地接受或不接受此处的变更，或是进行其他可选的修改、增加、删除等编辑操作，从而灵活地满足多种层次的调试需求。

在一个实施例中，上述Eclipse插件还可以提供CSS变更信息的处理结果展示功能。例如，在Eclipse基于上述Eclipse插件接收到CSS变更信息完成CSS文件的编辑时，Eclipse插件可以展示类似“处理成功”的提示；而在Eclipse基于Eclipse插件接收到CSS变更信息无法完成CSS文件的编辑时，Eclipse插件可以展示类似“处理失败”的提示和/或关于失败具体原因(例如不存在相关的CSS文件)的提示。

对应于上述调试网页CSS的方法实施例，本申请还提供一种调试网页CSS的装置，其用于将前端网页CSS的变更应用到存放在后端网页服务器的网页所对应的CSS文件。图3为该装置的实施例结构图，如图所示，本实施例中调试网页CSS的装置包括浏览器31、前端调试工具32、监听模块33、通信模块34及编辑工具35、处理模块36和提示模块37。其中，浏览器31用于显示网页300；前端调试工具32内置于浏览器31中并用于显示网页300中所包含的CSS 301，以供对照网页300在浏览器中的显示效果利用前端调试工具32对CSS 301进行变更；监听模块33，也内置于浏览器31中，用于在加载网页300的浏览器31中监听前端调试工具32对网页300中CSS 301的变更；通信模块34，同样内置于浏览器31中并与监听模块33连接，其用于将监听模块33监听到的CSS变更信息发送到CSS文件302的编辑工具35，在一个实施例中，通信模块34是通过socket请求的方式发送监听到的CSS变更信息；处理模块36，内置于编辑工具35中，用于使编辑工具35按照CSS文件302所包含的从属继承关系展示接收到的CSS变更信息，以供对CSS文件302进行编辑；提示模块37，与处理模块36连接，并用于在编辑工具35中显示与处理模块36对CSS文件302进行编辑的结果相关的处理成功的提示，或者处理失败和/或失败原因的提示。

在一个实施例中，上述编辑工具35中还包括接收模块38及数据模块39；接收模块38用于接收通信模块34发送的socket请求，数据模块39用于对接收模块38收到的socket请求进行数据处理，以得到socket请求中携带的CSS变更信息，供处理模块36用来进行后续处理。

参考上文调试网页CSS的方法实施例所述，在一个实施例中，编辑工具35可以与浏览器31安装于同一台计算机上，并通过远程访问的方式来对后端网页服务器上的CSS文件302进行编辑，从而调试人员在一台计算机上便可实现利用前端调试工具32对网页CSS 301进行调试以及利用编辑工具35对CSS文件302进行编辑；在另一个实施例中，编辑工具35与浏览器31还可以一起安装在网页服务器上，从而在网页服务器上即可完成对网页CSS301的调试以及对CSS文件302的编辑。接续，在一个实施例中，此处所述的浏览器31可以是Firefox浏览器，前端调试工具32可以是内嵌于Firefox浏览器的Firebug插件，监听模块33和通信模块34的组合可以对应一个Firefox浏览器框架下扩展于Firebug插件的监听插件，编辑工具35可以是Eclipse，处理模块36、提示模块37、接收模块38及数据模块39的组合可以对应一个Eclipse插件。然而，上述装置的实施例并不仅限于此，在不脱离本申请精神和实质范围的前提下，本领域技术人员可做适当变更。

综上所述，本申请实施例提供的调试网页CSS的方法及装置，能够将监听到的前端调试工具对网页CSS的变更同步到CSS文件的编辑工具，从而可以实时将网页CSS的变更应用于后端网页服务器的CSS文件中，便利地实现了网页CSS的调试。并且，由上述实施例可知，一方面，本申请调试网页CSS的方法各个步骤及其整体，可以对应于存储在计算机可读存储介质中的计算机可执行指令及其组成的计算机可执行程序；而另一方面，本申请调试网页CSS的装置，则可以对应于内嵌有并用以执行上述计算机可执行程序或指令的各部分计算机硬件及其组成的硬件集合。

虽然已参照几个典型实施例描述了本申请，但应当理解，所用的术语是说明和示例性、而非限制性的术语。由于本申请能够以多种形式具体实施而不脱离申请的精神或实质，所以应当理解，上述实施例不限于任何前述的细节，而应在随附权利要求所限定的精神和范围内广泛地解释，因此落入权利要求或其等效范围内的全部变化和改型都应为随附权利要求所涵盖。

Claims (10)

1.一种调试网页层叠样式表CSS的方法，用于将前端网页中CSS的变更应用到存放于后端网页服务器的CSS文件中，该方法包括以下步骤：

S1.在加载网页的浏览器中监听前端调试工具对所述网页中CSS的变更；

S2.将监听到的CSS变更信息发送到与所述网页对应的所述CSS文件的编辑工具；

S3.在所述编辑工具中按照所述CSS文件所包含的从属继承关系展示接收到的所述CSS变更信息，以供对所述CSS文件进行编辑。

2.如权利要求1所述的调试网页CSS的方法，其中，所述步骤S1之前还包括：

利用所述浏览器加载所述网页，并利用内置于所述浏览器的所述前端调试工具显示所述网页中所包含的CSS，进而对照所述网页在所述浏览器中的显示效果利用所述前端调试工具对所述CSS进行变更。

3.如权利要求1所述的调试网页CSS的方法，其中，所述步骤S2包括：

通过套接字socket请求的方式发送所述监听到的CSS变更信息。

4.如权利要求3所述的调试网页CSS的方法，其中，所述步骤S2与S3之间还包括：

在所述编辑工具中对接收到的socket请求进行数据处理，以得到所述socket请求中携带的所述CSS变更信息。

5.如权利要求3所述的调试网页CSS的方法，其中，所述步骤S3之后还包括：

在所述编辑工具中显示与所述CSS文件的编辑结果相关的处理成功的提示，或者处理失败和/或失败原因的提示。

6.一种调试网页CSS的装置，用于将前端网页中CSS的变更应用到存放于后端网页服务器的CSS文件中，该装置包括：

监听模块，用于在加载网页的浏览器中监听前端调试工具对所述网页中CSS的变更；

通信模块，用于将所述监听模块监听到的CSS变更信息发送到与所述网页对应的所述CSS文件的编辑工具；

处理模块，在所述编辑工具中按照所述CSS文件所包含的从属继承关系展示接收到的所述CSS变更信息，以供对所述CSS文件进行编辑。

7.如权利要求6所述的调试网页CSS的装置，其中，所述浏览器用于加载所述网页；所述前端调试工具内置于所述浏览器中并用于显示所述网页中所包含的CSS，以供对照所述网页在浏览器中的显示效果利用所述前端调试工具对所述CSS进行变更。

8.如权利要求6所述的调试网页CSS的装置，其中，所述通信模块是通过socket请求的方式发送所述监听到的CSS变更信息。

9.如权利要求8所述的调试网页CSS的装置，其中，还包括内置于所述编辑工具中的接收模块及数据模块；所述接收模块用于接收所述通信模块发送的socket请求；所述数据模块用于对所述接收模块收到的socket请求进行数据处理，以得到所述socket请求中携带的所述CSS变更信息。

10.如权利要求6所述的调试网页CSS的装置，其中，还包括提示模块，用于在所述编辑工具中显示与所述处理模块对CSS文件进行编辑的结果相关的处理成功的提示，或者处理失败和/或失败原因的提示。