จะบันทึกการเปลี่ยนแปลง CSS ของแผงสไตล์ของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ได้อย่างไร

195

จะบันทึกการเปลี่ยนแปลง CSS ของแผงสไตล์ของเครื่องมือนักพัฒนาซอฟต์แวร์ Google Chrome ได้อย่างไร

ที่เว็บไซต์ของเครื่องมือมันบอกว่าเราสามารถเห็นการเปลี่ยนแปลงทั้งหมดในแผงทรัพยากร

ป้อนคำอธิบายรูปภาพที่นี่

แต่ฉันกำลังทำงานอยู่บนไฟล์ CSS แต่การเปลี่ยนแปลงไม่แสดงในแผงทรัพยากรสำหรับฉัน

ป้อนคำอธิบายรูปภาพที่นี่

ป้อนคำอธิบายรูปภาพที่นี่

คุณรู้จักโปรแกรมเสริมใดบ้างเครื่องมือในการบันทึกการเปลี่ยนแปลง css ของเครื่องมือนักพัฒนาซอฟต์แวร์ Chrome หรือไม่ ฉันรู้ว่าสำหรับ Firebug มีhttps://stackoverflow.com/search?q=firebug+CSS+changes+saveมากมาย

html  css  google-chrome  google-chrome-extension  google-chrome-devtools 
— Jitendra Vyas
แหล่งที่มา
ขณะนี้มี API สำหรับส่วนขยาย DevTools เพื่อรับการแจ้งเตือนเกี่ยวกับทรัพยากรที่มีการเปลี่ยนแปลงดังนั้นคุณสามารถสร้างส่วนขยายที่จะรวมเข้ากับ IDE ที่คุณเลือกหรือเพียงแค่โพสต์เนื้อหาของทรัพยากรไปยังเซิร์ฟเวอร์ WebDAV: developer.chrome.com/extensions/ …
— caseq
9
ผมเชื่อว่าคำถามนี้และคำตอบของมันมีความล้าสมัยเช่นChrome ได้ย้ายตั้งแต่การแก้ไข CSS-ประหยัดการทำงานกับ "แหล่งที่มา" ของแผง ฟังก์ชั่นนี้ค่อนข้างสับสนและทำให้เข้าใจผิดบ้าง: ฉันสำรวจฟังก์ชั่นการประหยัด CSS นี้ของ Chrome โดยละเอียดในโพสต์ Stack Overflow ที่เกี่ยวข้องนี้: stackoverflow.com/questions/16005435/…
— ChaseMoskal
— mems
การแทนที่ในเครื่องเป็นวิธีการใหม่ในการทำเช่นนี้เริ่มต้นใน Chrome 65 การแทนที่เป็นคุณลักษณะที่แตกต่างจากพื้นที่ทำงาน
— Kayce Basques

คำตอบ:

137

คุณสามารถบันทึกการเปลี่ยนแปลง CSS ของคุณได้จาก Chrome Dev Tools ตอนนี้ Chrome อนุญาตให้คุณเพิ่มโฟลเดอร์ในพื้นที่ทำงานของคุณ หลังจากอนุญาตให้ Chrome เข้าถึงโฟลเดอร์และเพิ่มโฟลเดอร์ในพื้นที่ทำงานท้องถิ่นคุณสามารถจับคู่ทรัพยากรเว็บกับทรัพยากรท้องถิ่น

  • นำทางไปยังพาเนล Sources ของเครื่องมือสำหรับนักพัฒนาคลิกขวาในพาเนลด้านซ้าย (ที่มีรายการไฟล์) และเลือกเพิ่มโฟลเดอร์ลงในเวิร์กสเปซ คุณสามารถไปที่สไตล์ชีทในพาเนลแหล่งที่มาได้อย่างรวดเร็วโดยคลิกที่สไตล์ชีทที่ด้านบนขวาของแต่ละ CSS กฎสำหรับองค์ประกอบที่เลือกในแผงองค์ประกอบ

ป้อนคำอธิบายรูปภาพที่นี่

  • หลังจากเพิ่มโฟลเดอร์คุณจะต้องให้ Chrome สามารถเข้าถึงโฟลเดอร์ได้ อนุญาตการเข้าถึงโครเมี่ยม

  • ถัดไปคุณต้องแมปทรัพยากรเครือข่ายกับทรัพยากรท้องถิ่น

ป้อนคำอธิบายรูปภาพที่นี่

  • หลังจากโหลดหน้านี้อีกครั้ง Chrome จะโหลดทรัพยากรในท้องถิ่นสำหรับไฟล์ที่แม็พ เพื่อให้สิ่งต่าง ๆ ง่ายขึ้น Chrome จะแสดงเฉพาะแหล่งข้อมูลในตัวคุณ (เพื่อให้คุณไม่สับสนว่าจะแก้ไขข้อมูลในท้องถิ่นหรือเครือข่าย) หากต้องการบันทึกการเปลี่ยนแปลงของคุณกดCTRL + Sเมื่อแก้ไขไฟล์

PS

คุณอาจต้องเปิดไฟล์ที่แมปและเริ่มแก้ไขเพื่อให้ Chrome ใช้เวอร์ชันท้องถิ่น (วันที่ 201604.12)

— ฟิลิปรามิเรซ
แหล่งที่มา
4
ฉันต้องการเพิ่มที่ด้านล่างสุดของสไตล์ชีทของชุดรูปแบบของฉันไม่ว่า CSS จะแตกต่างกันอย่างไรขณะที่ฉันแก้ไข CSS แค่นั้นแหละ. มีวิธีใดในการสร้าง 'diff' ที่เป็น CSS ที่ฉันสามารถคัดลอกและวางได้ ดูคำถามอื่น ๆ นี้: stackoverflow.com/questions/21871535/…เรื่องราวพื้นหลังคือฉันกำลังแก้ไข CSS ที่เป็นของธีมฉันสามารถเพิ่ม CSS ที่ด้านล่างของสไตล์ชีทไม่แก้ไขอะไรข้างต้น เช่นเดียวกับถ้ามีคนสามารถเพิ่ม custom.css ไปยังเว็บไซต์ที่มีการแทนที่ CSS ของเขาเท่านั้น
— Caroline Schnapp
paul-irish สนใจวิธีสร้าง diff / patch เฉพาะการเปลี่ยนแปลงโลคอล CSS (ไม่มีการเปลี่ยนแปลงรีโมต) SaveAs ไม่ได้แก้ปัญหาเรื่องความยืดหยุ่นและความเร่ง ...
— เดนิสเดนิซอฟ
ตอนนี้ chrome กำลังบันทึกไฟล์ในเครื่องโดยอัตโนมัติ (โดยไม่ต้องกด CTRL + S) จะป้องกันได้อย่างไร?
— Uzair Ali
ใช้งานไม่ได้สำหรับฉัน หลังจากบันทึกไฟล์ CSS ในโฟลเดอร์โลคัลการแม็พรีโมตเป็นโลคัลและการโหลดซ้ำการเปลี่ยนแปลงทั้งหมดจะหายไป :( การแก้ไขไฟล์ในเครื่องในแผงองค์ประกอบและการบันทึกไฟล์ในแหล่งที่มานั้นไม่ได้ทำให้การเปลี่ยนแปลงของฉันคงอยู่
— กรอบ
2
ดูเหมือนว่ามีข้อผิดพลาดในตัวตรวจสอบ Chrome 46 ว่าเมื่อทำการโหลดหน้าซ้ำไฟล์โลคัลที่แม็พจะถูกนำมาใช้ใหม่เฉพาะเมื่อคุณเปลี่ยนในพาเนลแหล่งที่มา คุณสามารถเปลี่ยนแปลงได้ในเครื่องมือแก้ไขภายนอก แต่คุณต้องเปิดและโฟกัสในแผงแหล่งที่มา
— กรอบ
30

นักเขียนและนักพัฒนาเทคโนโลยีของ DevTools สนับสนุนที่นี่

การเริ่มต้นใน Chrome 65 การแทนที่ท้องถิ่นเป็นวิธีการใหม่ที่มีน้ำหนักเบาในการทำสิ่งนี้ นี่คือคุณสมบัติที่แตกต่างจากพื้นที่ทำงาน

ตั้งค่าการแทนที่

  1. ไปที่แผงแหล่งที่มา
  2. ไปที่แท็บแทนที่
  3. คลิกเลือกโฟลเดอร์สำหรับการแทนที่
  4. เลือกไดเรกทอรีที่คุณต้องการบันทึกการเปลี่ยนแปลงของคุณ
  5. ที่ด้านบนของวิวพอร์ตของคุณคลิกอนุญาตเพื่อให้ DevTools อ่านและเขียนการเข้าถึงไดเรกทอรี
  6. ทำการเปลี่ยนแปลงของคุณ ใน GIF ด้านล่างคุณจะเห็นว่าการbackground:rosybrownเปลี่ยนแปลงยังคงมีอยู่ในการโหลดหน้าเว็บ

แทนที่การสาธิต

วิธีการแทนที่

เมื่อคุณทำการเปลี่ยนแปลงใน DevTools DevTools จะบันทึกการเปลี่ยนแปลงเป็นสำเนาของไฟล์ที่ถูกแก้ไขในคอมพิวเตอร์ของคุณ เมื่อคุณโหลดหน้าซ้ำ DevTools ให้บริการไฟล์ที่แก้ไขมากกว่าทรัพยากรเครือข่าย

ความแตกต่างระหว่างการแทนที่และพื้นที่ทำงาน

พื้นที่ทำงานได้รับการออกแบบเพื่อให้คุณใช้ DevTools เป็น IDE ของคุณ มันแมปรหัสที่เก็บของคุณกับรหัสเครือข่ายโดยใช้แผนที่แหล่งที่มา ประโยชน์ที่แท้จริงคือถ้าคุณกำลังลดขนาดโค้ดของคุณหรือใช้รหัสที่จำเป็นต้องทำการ transpiled เช่น SCSS จากนั้นการเปลี่ยนแปลงที่คุณทำใน DevTools (โดยปกติ) จะถูกแมปกลับไปยังซอร์สโค้ดเดิมของคุณ ในทางกลับกันการแทนที่จะช่วยให้คุณสามารถแก้ไขและบันทึกไฟล์ใด ๆ บนเว็บได้ เป็นวิธีแก้ปัญหาที่ดีหากคุณต้องการทดสอบการเปลี่ยนแปลงอย่างรวดเร็วและบันทึกการเปลี่ยนแปลงเหล่านั้นในการโหลดหน้าเว็บ

— Kayce Basques
แหล่งที่มา
5
งานนี้ แต่ก็ยังซับซ้อนเกินไป ฉันต้องการถ้าคุณสามารถเปิดใช้งานนี้สำหรับเซสชันปัจจุบันเท่านั้น IMHO ช่องทำเครื่องหมายเช่น "เก็บการเปลี่ยนแปลงทรัพยากรสำหรับเซสชันปัจจุบัน" จะเหมาะกับเวิร์กโฟลว์นักพัฒนาเว็บมากขึ้น การเปลี่ยนแปลงอย่างต่อเนื่องไม่ใช่สิ่งที่นักพัฒนาเว็บต้องการในธุรกิจรายวันของเขาและอาจทำให้เกิดอาการปวดหัวเพิ่มเติมหากคุณลืมที่จะลบล้างการแทนที่เหล่านี้และกลับมาในอีกไม่กี่สัปดาห์ต่อมา การแทนที่จะใช้ได้กับผู้ใช้ - ไม่ใช่สำหรับการดีบั๊ก ยังคงถูกโหวต
ฉันเห็นด้วยกับความคิดเห็นอื่น มันไม่ง่ายเลยและไม่ได้บันทึกการเปลี่ยนแปลงทั้งหมดดังนั้นจึงไม่เป็นประโยชน์ มันจะดีกว่าสำหรับเราที่จะเขียนส่วนขยายของโครเมี่ยมขนาดเล็กเพื่อรับฟังการเปลี่ยนแปลงและบันทึกไว้ นั่นคือถ้ามี API หรือกระบวนการที่เราสามารถขอได้ ... ยังไม่ได้ค้นหา
— Carles Alcolea
ขออภัยคุณไม่ได้เลิกใช้งาน SCSS แล้วและยังไม่พัฒนาอีกต่อไป อ้างถึงstackoverflow.com/a/57622797/10189759
— Luk Aron
@ Kayce Basques การพัฒนาส่วนขยายของ Chrome เป็นอย่างไร เมื่อคุณฉีดสไตล์ชีท (และ js) ฟีเจอร์ทั้งหมดเหล่านี้จะไม่ทำงานใช่ไหม โซลูชันใด ๆ สำหรับการพัฒนาประเภทนั้น (เพื่อเร่งการอัปเดต css / js จากเครื่องมือ dev dev ของ Chrome ไปยังไฟล์ส่วนขยายในเครื่อง) ขอบคุณ
— Andrew
19

Chrome เวอร์ชันใหม่มีคุณสมบัติที่เรียกว่าพื้นที่ทำงานซึ่งแก้ปัญหานี้ คุณสามารถกำหนดเส้นทางบนเว็บเซิร์ฟเวอร์ของคุณที่สอดคล้องกับเส้นทางใดในระบบของคุณจากนั้นแก้ไขและบันทึกด้วยเพียง ctrl-s

ดู: http://www.html5rocks.com/th/tutorials/developertools/revolutions2013/

— rjmunro
แหล่งที่มา
ฉันคิดว่า OP ต้องการเห็นการเปลี่ยนแปลงที่เขาทำในแท็บสไตล์ของแผงองค์ประกอบ การเปลี่ยนแปลงเหล่านี้ไม่จำเป็นต้องเชื่อมโยงกับไฟล์ต้นฉบับเฉพาะ
— Ron Inbar
13

ฉันรู้ว่ามันเป็นโพสต์เก่า แต่ฉันบันทึกด้วยวิธีนี้:

  1. ไปที่บานหน้าต่างแหล่งที่มา
  2. คลิกแสดงตัวนำทาง (เพื่อแสดงบานหน้าต่างนำทางด้านซ้าย)ป้อนคำอธิบายรูปภาพที่นี่
  3. คลิกไฟล์ CSS ที่คุณต้องการ (มันจะเปิดในตัวแก้ไขพร้อมการเปลี่ยนแปลงทั้งหมดที่คุณทำ)
  4. คลิกขวาที่เครื่องมือแก้ไขและบันทึกการเปลี่ยนแปลงของคุณ

นอกจากนี้คุณยังสามารถดูการปรับเปลี่ยนท้องถิ่นเพื่อดูการแก้ไขคุณสมบัติที่น่าสนใจ ยังทำงานกับสคริปต์

— Guilherme de Jesus Santos
แหล่งที่มา
ฉันไม่พบ "Show Navigator"
— NickyLarson
@NickyLarson ฉันแก้ไขคำตอบของฉันเพื่อรวมปุ่มนี้ไว้ที่ไหน
— Guilherme de Jesus Santos
อ่านคำถามเดิมอีกครั้ง เขาไม่ได้แก้ไขไฟล์ CSS เขากำลังทำการเปลี่ยนแปลงในแท็บสไตล์ของแผงองค์ประกอบ
— Ron Inbar
11

คุณกำลังดูในส่วนที่ผิดของ "ทรัพยากร"

ไม่อยู่ภายใต้ "Local Storage" อยู่ภายใต้ "Frames":

ภาพหน้าจอด้านบนแสดงให้เห็นถึงความแตกต่างของรูปแบบดั้งเดิมกับการดัดแปลงใหม่ที่เกิดขึ้นใน devtools คุณสามารถคลิกขวาที่รายการในบานหน้าต่างด้านซ้ายและบันทึกกลับไปที่ดิสก์

— thirtydot
แหล่งที่มา
ไม่มีอะไรอยู่ในเฟรมด้วยสำหรับฉัน ฉันได้เพิ่มภาพหน้าจออีกหนึ่งคำถาม
— Jitendra Vyas
ฉันไม่แน่ใจว่า "เฟรม" ของคุณว่างเปล่าได้อย่างไร นั่นฟังดูหัก ลองใช้งานใน Canary build (คุณสามารถติดตั้งกับรุ่นปัจจุบันของคุณ): tools.google.com/dlpage/chromesxs
— สามสิบdot
นกขมิ้นไม่สามารถเปิดได้ ฉันยังพบวิธีแก้ปัญหานี้justin.my/2011/04/why-my-google-chrome-canary-cannot-runแต่ก็ยังใช้งานไม่ได้ ฉันได้รับข้อความนี้เมื่อการติดตั้งเสร็จสิ้นk.min.us/iefbE2.jpg
— Jitendra Vyas
2
ในช่วงสุดสัปดาห์นี้ (5/21/2012) การแก้ปัญหานี้ไม่ทำงานอีกต่อไปฉันเชื่อว่า ฉันเคยทำสิ่งเดียวกันกับที่คุณแสดงเพื่อเขียนชิ้นใหญ่ของcss ใหม่ (ไม่ใช่เก่าหรือแก้ไข) แต่ตอนนี้สำหรับฉันอย่างน้อยการคลิกที่ไฟล์ HTML นั้นจะแสดงเฉพาะ HTML ดิบโดยไม่แสดงกฎ CSS ใหม่ มันยังใช้งานได้สำหรับคุณและถ้าไม่มีวิธีการใหม่ในการทำเช่นนี้?
— คลีออน
สิ่งนี้ไม่ได้ผลสำหรับฉันใน Chrome 48 ยังคงทำเช่นนี้อีกหรือไม่
— DMTintner
10

ส่วนต่อขยาย Tincr Chrome นั้นง่ายต่อการติดตั้ง (ไม่จำเป็นต้องเรียกใช้โหนดเซิร์ฟเวอร์) และยังมาพร้อมกับ LiveReload เช่นฟังก์ชั่นการใช้งานนอกกรอบ! พูดคุยเกี่ยวกับการแก้ไขแบบสองทิศทาง! :)

เว็บไซต์ Tin.cr

ลิงก์ Chrome เว็บสโตร์

บทความบล็อกของ Andy

— Jose Browne
แหล่งที่มา
เครื่องมือโอเพนซอร์สเช่น browserync.io นั้นดีกว่ามากรองรับเบราว์เซอร์ที่ทันสมัยทั้งหมดและมอบสิ่งอื่น ๆ อีกมากมาย
— Gianfranco P.
8

ตอนนี้ Chrome 18 ได้เปิดตัวเมื่อสัปดาห์ที่แล้วด้วย API ที่จำเป็นฉันจึงเผยแพร่ส่วนขยาย chromeของฉันใน Chrome เว็บสโตร์ ส่วนขยายจะบันทึกการเปลี่ยนแปลงใน CSS หรือ JS ในเครื่องมือนักพัฒนาโดยอัตโนมัติลงในดิสก์ภายในเครื่อง ไปตรวจสอบมัน

— Tomi Mickelsson
แหล่งที่มา
4

FYI หากคุณกำลังใช้รูปแบบอินไลน์หรือแก้ไข DOM โดยตรง (ตัวอย่างเช่นการเพิ่มองค์ประกอบ) พื้นที่ทำงานไม่สามารถแก้ปัญหานี้ได้ นั่นเป็นเพราะ DOM อยู่ในหน่วยความจำและไม่มีไฟล์จริงที่เกี่ยวข้องกับสถานะการใช้งานของ DOM

เพื่อที่ฉันต้องการใช้ "ก่อน" และ "หลัง" snapshot ของ dom จากคอนโซล: copy(document.getElementsByTagName('html')[0].outerHTML)

จากนั้นฉันก็วางมันลงในเครื่องมือต่าง ๆ เพื่อดูการเปลี่ยนแปลงของฉัน

ภาพเครื่องมือดิฟ

บทความเต็ม: https://medium.com/@theroccob/get-code-out-of-chrome-devtools-and-into-your-editor-defaf5651b4a

— RoccoB
แหล่งที่มา
1

ในการตอบคำถามสุดท้ายของคุณเกี่ยวกับส่วนขยายใด ๆ ที่สามารถบันทึกการเปลี่ยนแปลงได้มีโปรแกรมแก้ไขด่วน

ช่วยให้คุณสามารถบันทึกการเปลี่ยนแปลงจาก Chrome Dev Tools โดยตรงไปยัง GitHub จากที่นั่นคุณสามารถตั้งค่า hook post-receive บน GitHub เพื่ออัปเดตเว็บไซต์ของคุณโดยอัตโนมัติ

— FajitaNachos
แหล่งที่มา
1

ตราบใดที่คุณยังไม่ได้ติด CSS ในelement.style:

  1. ไปที่สไตล์ที่คุณเพิ่ม ควรมีลิงค์บอกว่าสไตล์ชีทของผู้ตรวจสอบ:

ป้อนคำอธิบายรูปภาพที่นี่

  1. คลิกที่นั้นและมันจะเปิด CSS ทั้งหมดที่คุณได้เพิ่มในแผงแหล่งที่มา

  2. คัดลอกและวางมัน - ใช่!

หากคุณได้ใช้element.style:

คุณสามารถคลิกขวาที่องค์ประกอบ HTML ของคุณคลิกแก้ไขเป็น HTML จากนั้นคัดลอกและวาง HTML ด้วยสไตล์อินไลน์

— อีธาน
แหล่งที่มา
1
และถ้าคุณไม่สามารถหาสไตล์ชีทของผู้ตรวจสอบได้เพราะคุณขาดการค้นหาผ่าน dom เพียงแค่ Ctrl + P (หรือ CMD + P) ในขณะที่ DevTools มุ่งเน้นและเริ่มเขียน "inspec" ... มันจะปรากฏขึ้นมา จากนั้นเพียงแค่ป้อน i.imgur.com/WSWcbh8.png
— Carles Alcolea
1

อัปเดต 2019: เนื่องจากคำตอบอื่น ๆ ล้าสมัยไปแล้วฉันจะเพิ่มคำตอบใหม่ที่นี่ ในเวอร์ชั่นล่าสุดไม่จำเป็นต้องแมปโฟลเดอร์ chrome กับระบบไฟล์

ป้อนคำอธิบายรูปภาพที่นี่

ดังนั้นฉันจึงมีเว็บโฟลเดอร์ที่มีไฟล์ HTML, CSS, JS ในเดสก์ท็อปซึ่งฉันต้องการได้รับการอัปเดตเมื่อฉันทำการเปลี่ยนแปลงใน chrome: =

1) คุณต้องมีเซิร์ฟเวอร์ภายในที่รันอยู่เช่นโหนด ฯลฯ หรือส่วนขยาย vscode นี้สร้างเซิร์ฟเวอร์ให้กับคุณ: เซิร์ฟเวอร์ส่วนขยาย VSCode ที่ใช้งานจริงติดตั้งแล้วรันเซิร์ฟเวอร์

2) โหลดหน้า html ใน chrome จากการเรียกใช้เซิร์ฟเวอร์ท้องถิ่น

3) เปิด devTools-> Sources-> Filesystem-> เพิ่มโฟลเดอร์ไปยังพื้นที่ทำงาน

ป้อนคำอธิบายรูปภาพที่นี่

4) เพิ่มโฟลเดอร์ที่ใช้ในการรันเซิร์ฟเวอร์ท้องถิ่น ไม่จำเป็นต้องทำการแมปเพิ่มเติมใน chrome ล่าสุด! Ta-da!

เพิ่มเติมเกี่ยวกับมันแก้ไขไฟล์ด้วยพื้นที่ทำงาน

โปรดทราบว่าการเปลี่ยนแปลงที่ทำกับแท็บสไตล์จะไม่ส่งผลต่อไฟล์ระบบไฟล์ แต่คุณต้องไปที่ devtools-> source-> your_folder จากนั้นทำการเปลี่ยนแปลงที่นั่นและโหลดหน้าเว็บซ้ำเพื่อดูผลกระทบ
ป้อนคำอธิบายรูปภาพที่นี่

— JerryGoyal
แหล่งที่มา
1
แต่ OP ได้ถามเฉพาะเกี่ยวกับการเปลี่ยนแปลงในแท็บสไตล์ ...
— Ron Inbar
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.