{"id":2957,"date":"2014-11-17T17:15:38","date_gmt":"2014-11-17T16:15:38","guid":{"rendered":"http:\/\/www.espai.es\/blog\/?p=2957"},"modified":"2014-11-27T18:55:33","modified_gmt":"2014-11-27T17:55:33","slug":"como-modificar-nuestro-css-desde-google-chrome","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2014\/11\/como-modificar-nuestro-css-desde-google-chrome\/","title":{"rendered":"C\u00f3mo modificar nuestro CSS desde Google Chrome"},"content":{"rendered":"

Hola y bienvenidos de nuevo al \u00e1rea web de Escola Espai.<\/span><\/p>\n

Os hemos ense\u00f1ado c\u00f3mo modificar el c\u00f3digo CSS desde el inspector de c\u00f3digo de nuestro navegador pero sin guardarlo. Ahora<\/strong> ya es posible guardar el c\u00f3digo CSS creando en Google Chrome un espacio de trabajo (Workspace).<\/span><\/p>\n

Para poder guardar nuestro c\u00f3digo debemos seguir los siguientes pasos:<\/span><\/p>\n

1. Generar nuestro espacio de trabajo:<\/span><\/p>\n

Ir al Inspector de elementos (F12) y a opciones.<\/span><\/p>\n

\"opciones\"<\/a><\/p>\n

Una vez en opciones (settings), seleccionar Workspace y Add folder\u2026<\/span><\/p>\n

\"seleccion\"<\/a><\/p>\n

Seleccionar la carpeta ra\u00edz de nuestro proyecto<\/span><\/p>\n

\"seleccion2\"<\/a><\/p>\n

Permitir el acceso de DevTools a la carpeta del proyecto<\/span><\/p>\n

\"permitir\"<\/a><\/p>\n

Se reiniciar\u00e1 el inspector de elementos de Chrome. <\/span><\/p>\n

Y ya hemos generado nuestro espacio de trabajo.<\/span><\/p>\n

2. Mapear nuestro archivo CSS<\/span><\/p>\n

Una vez creado nuestro espacio de trabajo debemos elegir el archivo CSS que queremos modificar, para eso debemos ir a sources dentro del inspector de elementos.<\/span><\/p>\n

\"mapeo\"<\/a><\/p>\n

Entrar en la carpeta de nuestro archivo CSS local, hacer click derecho encima del archivo css y click encima Map to the file System resource…<\/span><\/p>\n

\"mapeo2\"<\/a>
\nUna vez terminada la \u00faltima acci\u00f3n, Google Chrome ya nos permite modificar nuestro c\u00f3digo desde sources y guardarlo con un sencillo Crtl + S. Chrome no s\u00f3lo nos permite modificar el CSS, tambi\u00e9n nos permite modificar el Javascript y el Html.<\/span><\/p>\n

Espero que el art\u00edculo os haya sido de ayuda.<\/span><\/p>\n

Saludos desde el departamento web y hasta la pr\u00f3xima.
\n<\/span><\/p>\n

Marc<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

Hola y bienvenidos de nuevo al \u00e1rea web de Escola Espai. Os hemos ense\u00f1ado c\u00f3mo modificar el c\u00f3digo CSS desde el inspector de c\u00f3digo de nuestro navegador pero sin guardarlo. Ahora ya es posible guardar el c\u00f3digo CSS creando en Google Chrome un espacio de…<\/p>\n","protected":false},"author":20,"featured_media":2980,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_ef_editorial_meta_date_first-draft-date":"","_ef_editorial_meta_paragraph_assignment":"","_ef_editorial_meta_checkbox_needs-photo":"","_ef_editorial_meta_number_word-count":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[7,218,4],"tags":[93,12,316],"class_list":["post-2957","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","category-escola-espai","category-internet","tag-chrome","tag-css","tag-workspace"],"yoast_head":"\nC\u00f3mo modificar nuestro CSS desde Google Chrome - Blog Escola Espai<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.espai.es\/blog\/2014\/11\/como-modificar-nuestro-css-desde-google-chrome\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo modificar nuestro CSS desde Google Chrome - Blog Escola Espai\" \/>\n<meta property=\"og:description\" content=\"Hola y bienvenidos de nuevo al \u00e1rea web de Escola Espai. Os hemos ense\u00f1ado c\u00f3mo modificar el c\u00f3digo CSS desde el inspector de c\u00f3digo de nuestro navegador pero sin guardarlo. Ahora ya es posible guardar el c\u00f3digo CSS creando en Google Chrome un espacio de...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.espai.es\/blog\/2014\/11\/como-modificar-nuestro-css-desde-google-chrome\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Escola Espai\" \/>\n<meta property=\"article:published_time\" content=\"2014-11-17T16:15:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-11-27T17:55:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2014\/11\/Como-modificar-nuestro-CSS-desde-Google-Chrome.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"360\" \/>\n\t<meta property=\"og:image:height\" content=\"254\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Marc Santamaria\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marc Santamaria\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.espai.es\/blog\/2014\/11\/como-modificar-nuestro-css-desde-google-chrome\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2014\/11\/como-modificar-nuestro-css-desde-google-chrome\/\"},\"author\":{\"name\":\"Marc Santamaria\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/16388b945f89ffecdb1204f9a3f84765\"},\"headline\":\"C\u00f3mo modificar nuestro CSS desde Google Chrome\",\"datePublished\":\"2014-11-17T16:15:38+00:00\",\"dateModified\":\"2014-11-27T17:55:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2014\/11\/como-modificar-nuestro-css-desde-google-chrome\/\"},\"wordCount\":249,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2014\/11\/como-modificar-nuestro-css-desde-google-chrome\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2014\/11\/Como-modificar-nuestro-CSS-desde-Google-Chrome.jpg\",\"keywords\":[\"Chrome\",\"CSS\",\"workspace\"],\"articleSection\":[\"Dise\u00f1o Web\",\"Escola Espai\",\"Internet\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.espai.es\/blog\/2014\/11\/como-modificar-nuestro-css-desde-google-chrome\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.espai.es\/blog\/2014\/11\/como-modificar-nuestro-css-desde-google-chrome\/\",\"url\":\"https:\/\/www.espai.es\/blog\/2014\/11\/como-modificar-nuestro-css-desde-google-chrome\/\",\"name\":\"C\u00f3mo modificar nuestro CSS desde Google Chrome - Blog Escola Espai\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2014\/11\/como-modificar-nuestro-css-desde-google-chrome\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2014\/11\/como-modificar-nuestro-css-desde-google-chrome\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2014\/11\/Como-modificar-nuestro-CSS-desde-Google-Chrome.jpg\",\"datePublished\":\"2014-11-17T16:15:38+00:00\",\"dateModified\":\"2014-11-27T17:55:33+00:00\",\"author\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/16388b945f89ffecdb1204f9a3f84765\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2014\/11\/como-modificar-nuestro-css-desde-google-chrome\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.espai.es\/blog\/2014\/11\/como-modificar-nuestro-css-desde-google-chrome\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/2014\/11\/como-modificar-nuestro-css-desde-google-chrome\/#primaryimage\",\"url\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2014\/11\/Como-modificar-nuestro-CSS-desde-Google-Chrome.jpg\",\"contentUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2014\/11\/Como-modificar-nuestro-CSS-desde-Google-Chrome.jpg\",\"width\":360,\"height\":254},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.espai.es\/blog\/2014\/11\/como-modificar-nuestro-css-desde-google-chrome\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.espai.es\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"C\u00f3mo modificar nuestro CSS desde Google Chrome\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.espai.es\/blog\/#website\",\"url\":\"https:\/\/www.espai.es\/blog\/\",\"name\":\"Blog Escola Espai\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.espai.es\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/16388b945f89ffecdb1204f9a3f84765\",\"name\":\"Marc Santamaria\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d9c6fe4669bafc42f2a16975a29af96161a1e5d3d9c0fa00171c242a44739983?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d9c6fe4669bafc42f2a16975a29af96161a1e5d3d9c0fa00171c242a44739983?s=96&d=mm&r=g\",\"caption\":\"Marc Santamaria\"},\"url\":\"https:\/\/www.espai.es\/blog\/author\/m-santamaria\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"C\u00f3mo modificar nuestro CSS desde Google Chrome - Blog Escola Espai","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.espai.es\/blog\/2014\/11\/como-modificar-nuestro-css-desde-google-chrome\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo modificar nuestro CSS desde Google Chrome - Blog Escola Espai","og_description":"Hola y bienvenidos de nuevo al \u00e1rea web de Escola Espai. Os hemos ense\u00f1ado c\u00f3mo modificar el c\u00f3digo CSS desde el inspector de c\u00f3digo de nuestro navegador pero sin guardarlo. Ahora ya es posible guardar el c\u00f3digo CSS creando en Google Chrome un espacio de...","og_url":"https:\/\/www.espai.es\/blog\/2014\/11\/como-modificar-nuestro-css-desde-google-chrome\/","og_site_name":"Blog Escola Espai","article_published_time":"2014-11-17T16:15:38+00:00","article_modified_time":"2014-11-27T17:55:33+00:00","og_image":[{"width":360,"height":254,"url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2014\/11\/Como-modificar-nuestro-CSS-desde-Google-Chrome.jpg","type":"image\/jpeg"}],"author":"Marc Santamaria","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Marc Santamaria","Tiempo de lectura":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.espai.es\/blog\/2014\/11\/como-modificar-nuestro-css-desde-google-chrome\/#article","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/2014\/11\/como-modificar-nuestro-css-desde-google-chrome\/"},"author":{"name":"Marc Santamaria","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/16388b945f89ffecdb1204f9a3f84765"},"headline":"C\u00f3mo modificar nuestro CSS desde Google Chrome","datePublished":"2014-11-17T16:15:38+00:00","dateModified":"2014-11-27T17:55:33+00:00","mainEntityOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2014\/11\/como-modificar-nuestro-css-desde-google-chrome\/"},"wordCount":249,"commentCount":0,"image":{"@id":"https:\/\/www.espai.es\/blog\/2014\/11\/como-modificar-nuestro-css-desde-google-chrome\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2014\/11\/Como-modificar-nuestro-CSS-desde-Google-Chrome.jpg","keywords":["Chrome","CSS","workspace"],"articleSection":["Dise\u00f1o Web","Escola Espai","Internet"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.espai.es\/blog\/2014\/11\/como-modificar-nuestro-css-desde-google-chrome\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.espai.es\/blog\/2014\/11\/como-modificar-nuestro-css-desde-google-chrome\/","url":"https:\/\/www.espai.es\/blog\/2014\/11\/como-modificar-nuestro-css-desde-google-chrome\/","name":"C\u00f3mo modificar nuestro CSS desde Google Chrome - Blog Escola Espai","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2014\/11\/como-modificar-nuestro-css-desde-google-chrome\/#primaryimage"},"image":{"@id":"https:\/\/www.espai.es\/blog\/2014\/11\/como-modificar-nuestro-css-desde-google-chrome\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2014\/11\/Como-modificar-nuestro-CSS-desde-Google-Chrome.jpg","datePublished":"2014-11-17T16:15:38+00:00","dateModified":"2014-11-27T17:55:33+00:00","author":{"@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/16388b945f89ffecdb1204f9a3f84765"},"breadcrumb":{"@id":"https:\/\/www.espai.es\/blog\/2014\/11\/como-modificar-nuestro-css-desde-google-chrome\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.espai.es\/blog\/2014\/11\/como-modificar-nuestro-css-desde-google-chrome\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/2014\/11\/como-modificar-nuestro-css-desde-google-chrome\/#primaryimage","url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2014\/11\/Como-modificar-nuestro-CSS-desde-Google-Chrome.jpg","contentUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2014\/11\/Como-modificar-nuestro-CSS-desde-Google-Chrome.jpg","width":360,"height":254},{"@type":"BreadcrumbList","@id":"https:\/\/www.espai.es\/blog\/2014\/11\/como-modificar-nuestro-css-desde-google-chrome\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.espai.es\/blog\/"},{"@type":"ListItem","position":2,"name":"C\u00f3mo modificar nuestro CSS desde Google Chrome"}]},{"@type":"WebSite","@id":"https:\/\/www.espai.es\/blog\/#website","url":"https:\/\/www.espai.es\/blog\/","name":"Blog Escola Espai","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.espai.es\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/16388b945f89ffecdb1204f9a3f84765","name":"Marc Santamaria","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d9c6fe4669bafc42f2a16975a29af96161a1e5d3d9c0fa00171c242a44739983?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d9c6fe4669bafc42f2a16975a29af96161a1e5d3d9c0fa00171c242a44739983?s=96&d=mm&r=g","caption":"Marc Santamaria"},"url":"https:\/\/www.espai.es\/blog\/author\/m-santamaria\/"}]}},"jetpack_featured_media_url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2014\/11\/Como-modificar-nuestro-CSS-desde-Google-Chrome.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/2957","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/comments?post=2957"}],"version-history":[{"count":17,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/2957\/revisions"}],"predecessor-version":[{"id":2986,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/2957\/revisions\/2986"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media\/2980"}],"wp:attachment":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media?parent=2957"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/categories?post=2957"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/tags?post=2957"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}